Progress Circle
Circular progress indicator for determinate and indeterminate loading states.
Anatomy
- 1 Track — full circular rail showing the total range
- 2 Indicator — animated arc for indeterminate loading or partial arc for determinate progress
Options
Table of options
| Property | Values | Default |
|---|---|---|
| value | 0–100 | 0 |
| indeterminate | true / false | false |
| size | sm / md / lg | md |
| aria-label | text | — |
| aria-labelledby | element id | — |
Behaviors
Determinate progress
Use a numeric value from 0 to 100 when the system can measure completion progress.
Indeterminate loading
Use the indeterminate mode when work is active but the remaining duration is unknown.
Accessible naming
Always provide an accessible name with aria-label or aria-labelledby so screen readers can announce the loading context.
Usage guidelines
Do
Use determinate progress when the completed portion can be quantified.
Don't
Don’t fake a percentage when the system cannot estimate progress yet.
Accessibility
- Use
role="progressbar"on the component root. - Provide an accessible name with
aria-labeloraria-labelledby. - Determinate usage sets
aria-valuemin,aria-valuemax, andaria-valuenow. - Indeterminate usage omits
aria-valuenowbecause there is no measurable percentage. - The indicator uses motion and arc length, not color alone, to distinguish progress from the track.
Theming
Progress Circle adapts automatically across brands and color modes through component tokens. Use the hero preview switches above to inspect the same pattern across light and dark modes.
For the full theming architecture see Foundations: Theming.