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.
Usage
Import the parts you need from the component's folder.
ts
import { CircularProgress } from "@/components/ui/circular-progress";Colour thresholds
The ring colour reflects completeness — red (<34), amber (34-66), green (≥67).
Sizes
Control the diameter with size and the ring thickness with strokeWidth.
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.