What is the SVG Circular Progress Generator?
A progress ring shows a percent as an arc around a circle. It is built with one SVG circle and stroke-dasharray. Slide the value, pick the colours and thickness, and the ring is drawn at once.
The ring can fill by itself when it loads, with no JavaScript. Add a gradient, round ends, a percent and a label in the middle.
How to use it
- Slide the progress value and type a label.
- Pick colours, thickness and the animation.
- Press Download SVG or PNG.
Why people like this tool
Fill animation
Built into the SVG, no scripts.
Percent in the middle
With an optional label.
Gradient and round ends
Soft, modern look.
Sharp anywhere
Vector, any size.
