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