Feedback
Progress Circle
Circular progress indicator with optional value label and animation. Multiple sizes.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/progress-circle
Examples
Animated
Press Start — the ring fills over time with the value shown in the centre.
0%
Fixed values
Any value 0–100; toggle showValue to print the number inside.
100%
Labeled metrics
Group circles into a compact metrics dashboard.
38%
64%
82%
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { ProgressCircle } from "@codefast/ui/progress-circle";
<ProgressCircle value={75} showValue />
API reference
Props for each part of the component. All native element props are also forwarded.
ProgressCircle
A circular determinate progress indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Progress from 0 to 100. |
| showValue | boolean | false | Render the numeric value in the centre. |
| size | number | — | Diameter in pixels (overrides the size variant). |
| customLabel | ({ value }) => JSX.Element | — | Render your own centre label instead of the number. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Has role=progressbar with the value mirrored for assistive tech.
- If showValue is off, describe progress nearby so it isn’t only visual.
- Use a Spinner for indeterminate waits where there’s no percentage.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use in compact spots — cards, avatars, dashboards.
- Show the value for precise, glanceable feedback.
Don’t
- Don’t use for indeterminate progress.
- Don’t rely on colour alone to signal a threshold.