ProgressRing
The round version, for tight spots and dashboards.
import
import { ProgressRing } from '@joshicodes/cock';Rings
Leave value out for a ring that spins instead.
72% 92% 38%
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of ProgressRing
| Prop | Type | Default |
|---|---|---|
value 0 to `max`. Leave it out for a spinning, indeterminate ring. | number | — |
max | number | 100 |
size Diameter in pixels. | number | 40 |
thickness Stroke width in pixels. | number | 4 |
variant | 'accent' | 'success' | 'warning' | 'danger' | 'accent' |
showValue Print the percentage in the middle. | boolean | false |
label | string | — |
class | string | — |