The ProgressRing component sweeps an arc round to a value and counts a label up alongside it, driving both from one animation so the number can never finish ahead of the arc describing it.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/progress-ring.jsonEverything Progress Ring accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 72 | How far round to sweep, 0 to 100 |
| size | number | 120 | Outer diameter, in pixels |
| strokeWidth | number | 10 | Thickness of the ring, in pixels |
| duration | number | 1.2 | Seconds the sweep takes |
| showLabel | boolean | true | Print the percentage in the middle |
| className | string | '' | Additional CSS classes for styling |
The number is driven by the same animation as the arc.