Circular Progress
Radial progress ring (0-100) with an optional centered percentage label. The ring colour shifts by threshold: red below 34, amber up to 66, green at 67 and above.
Default
Pass a value between 0 and 100. The percentage renders in the center.
72
Colour thresholds
The ring colour reflects completeness — red (<34), amber (34-66), green (≥67).
22
55
88
Sizes
Control the diameter with size and the ring thickness with strokeWidth.
72
72
72
Without label
Set showLabel to false to render the ring only — useful in tight cells.
Animated
Bind value to a ref; the ring tweens smoothly as the number changes.
0
API Reference
Props, events, and slots for each sub-component.
CircularProgress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Progress percentage, 0-100. Values are clamped and rounded. |
| size | number | 36 | Diameter of the ring in pixels. |
| strokeWidth | number | 4 | Thickness of the ring stroke in pixels. |
| showLabel | boolean | true | Show the rounded percentage in the center. |