progress
Progress ring with count-up
A tiny SVG ring that, on entering the viewport, animates a motion value up to its percentage: the stroke-dashoffset and the central figure derive from the same value, so the number and the arc never fall out of sync.
See it live and copy its promptWhat you can adjust
- Percentage
- Size
- Duration
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
