Circular Progress Ring
A circular SVG progress ring that fills up with animated stroke.
Adjust the preview
Every choice updates the preview and the wording below.
Size
Stroke
Color
Track
Your prompt
Highlighted values follow your choices — click one to write your own.
Create a circular progress ring using SVG stroke-dasharray animation. The ring is 120px wide with a medium 8px stroke. The fill color is gradient (blue to purple) with a subtle gray track. Animate from 0 to the target percentage. Show the percentage number in the center.
Paste it into Claude, Cursor, or v0 along with the context for your project.