ProgressCircle
Circular determinate progress indicator rendered as an SVG arc
Category: feedback · WCAG 2.2-AA · progress, loading, circle, feedback
Sizes
- sm
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value from 0 to max — clamped |
max | number | 100 | Maximum allowed value. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
showValue | boolean | false | Renders the rounded percentage in the center — pairs best with md and lg |
ariaLabel | string | — | Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated. |
label | string | — | Accessible name announced by screen readers |
Design tokens
--cascivo-color-border--cascivo-color-accent--cascivo-color-text
When to use
- Showing determinate progress compactly as a circular arc
- Displaying a percentage in a small footprint (showValue)
- Tracking completion against a custom maximum (max)
When not to use
- Indeterminate work with no known value — use Spinner
- Full-width linear progress with a label and helper text — use ProgressBar
- Multi-step flows — use ProgressIndicator
How to build an accessible ProgressCircle in React →
Examples
Default
<ProgressCircle value={40} label="Loading" />With value
<ProgressCircle value={72} showValue size="lg" label="Upload progress" />Custom max
<ProgressCircle value={3} max={8} label="Steps completed" />Related components
- ProgressBar — Linear form with labels and indeterminate support
- Spinner — Indeterminate alternative when value is unknown