# How can I create a circular progress bar in Penpot **URL:** \ **Category:** Ask the community\ **Created:** [December 1, 2024, 10:20am UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199 "2024-12-01T10:20:50Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [December 1, 2024, 10:20am UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/1 "2024-12-01T10:20:50Z")
I would like to use a circular progress bar. But I can’t immediately find how to do this. A template would exist but the link no longer works for [sales dashboard UI example](https://community.penpot.app/t/how-do-i-create-a-pie-chart/6121/2) @LauraKalbag does this file still exist? Furthermore, I came across the following site but here everything is completely in CSS code but not sure how to do this in Penpot. See following website [30secondsofcode css circular progress bar](https://www.30secondsofcode.org/css/s/circular-progress-bar/) ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [December 1, 2024, 12:45pm UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/2 "2024-12-01T12:45:51Z")
Hi! If the chart can be static, there is a [plugin](https://penpot.app/penpothub/plugins/shapes) that allows you to create arcs, the parameters are in percentage, so it is easy to set the right width based on the data. ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [December 1, 2024, 5:05pm UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/3 "2024-12-01T17:05:22Z")
Its more something like the pictures below I would like to do, so you have a percentage in the middle and the from the colour change of the circumference of the circle you can visually see the percentage. ![994bedb6671c5bc19b3c550cac3bc1dc02a76128_2_487x500](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/a26d7fde80f202fe6f15f51c6e89f73ffc741169.jpeg) or ![Naamloos](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/c88c4f20abf4a15478c9d1202d99386664fc17f6.png) ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [December 1, 2024, 10:33pm UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/4 "2024-12-01T22:33:40Z")
![piechart](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/c8ef71c184538d01f59553d7929a0b0b87d9f9a4.gif) The plugin generates a folder with the svg path inside, you have to act on that if you want to change the thickness for example; you could also separate it from the folder but I do not recommend it as the alignment with other elements would be more problematic. ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [December 2, 2024, 10:43am UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/5 "2024-12-02T10:43:32Z")
You can [download this template from the Penpot hub](https://penpot.app/penpothub/libraries-templates/sales-dashboard-example) now 🙂 ---
**Author:** ![candidexmedia](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/candidexmedia/32/9178_2.png) [@candidexmedia](https://community.penpot.app/u/candidexmedia)\ **Post date:** [December 4, 2024, 4:41am UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/6 "2024-12-04T04:41:11Z")
Love the shape plugin! I just found out that I can do this for filled circles too: ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/d/d3077c94ee61d1ad78309fe345c892a25ba191eb.png) ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [December 4, 2024, 7:18am UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/7 "2024-12-04T07:18:32Z")
Yes, it’s really cool! The only thing is that with filled circles you can’t make circles 100% wide, I think it’s due to some bug, but I guess it’s a completely marginal problem! ---
**Author:** ![candidexmedia](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/candidexmedia/32/9178_2.png) [@candidexmedia](https://community.penpot.app/u/candidexmedia)\ **Post date:** [May 15, 2025, 3:19pm UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/8 "2025-05-15T15:19:07Z")
100% wide, or 100% filled? ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [May 16, 2025, 5:53am UTC](https://community.penpot.app/t/how-can-i-create-a-circular-progress-bar-in-penpot/7199/9 "2025-05-16T05:53:29Z")
If you want to create a circle with “100% sweep” and a certain “center cut” It doesn’t matter what percentage, it just needs to be higher than 0), the plugin returns an unexpected shape. But now there is a plugin dedicated to creating charts that is very functional and works great! > **[Penpot | Plugins](https://penpot.app/penpothub/plugins/PenPLOT)** > > Build, share and use plugins to enhance your design workflow.