Progress Ring
Display a percentage in a circular meter that fills as it comes into view.
- Dependencies
- No extra packages
- Size
- 207 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/progress-ring.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/progress-ring.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the progress-ring.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 97 | 0–100; clamped. |
| label | string | "Accuracy" | Mono caption and the meter's accessible name. |
| size | number | 176 | Diameter in px; type scales with it (value 48/176, label 10/176) and the ring never exceeds its container. |
| stroke | number | 3 | Arc width in viewBox units; the track is stroke / 2. |
| duration / delay | number | 2000 / 500 | Fill timing in ms, cubic-bezier(0, 0, .58, 1). |
| color / trackColor / textColor | string | "#ffffff" / "rgb(255 255 255 / .05)" / "#ffffff" | Arc and glow, track, and value colours; the label uses the text colour at 40%. |
| spin / spinDuration | boolean / number | true / 15 | Turns the whole ring once per spinDuration seconds, linear. |
| glow | boolean | true | Blurred disc at 5% of the colour. |
| countUp | boolean | false | Count the number with the arc; the original shows the final value. |
| suffix / decimals | string / number | "%" / 0 | Number formatting. |