Animations
ProgressRing
Circular SVG progress indicator with four variants: default, dashboard card, gradient arc, and segmented ring.
Preview:1280px
Default
75%
45%
Done
Dashboard Variant
87%
CPU Usage3 cores active
64%
Memory5.1 / 8 GB
92%
Disk184 / 200 GB
Gradient Variant
78%
42%
Segmented Variant
75%
40%
100%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Progress percentage (0–100). |
| variant | 'default' | 'dashboard' | 'gradient' | 'segmented' | 'default' | Visual style of the ring. |
| title | string | - | Heading text (dashboard variant). |
| subtitle | string | - | Detail text below title (dashboard variant). |
| status | 'success' | 'warning' | 'error' | 'info' | - | Semantic color for the ring arc. |
| segments | number | 8 | Number of arc segments (segmented variant). |
| label | string | - | Text in the center of the ring. |
| size | number | 64 | Diameter of the ring in px. |
| strokeWidth | number | 4 | Thickness of the progress arc. |
| color | string | '#6366f1' | Custom color for the arc (overridden by status). |