How can I create a circular progress bar in Penpot

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
@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

Hi!
If the chart can be static, there is a plugin that allows you to create arcs, the parameters are in percentage, so it is easy to set the right width based on the data.

1 Like

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.


or

piechart
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.

You can download this template from the Penpot hub now :slight_smile:

Love the shape plugin! I just found out that I can do this for filled circles too:

2 Likes

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!