Progress Bar
Linear progress indicator for determinate and indeterminate operations.
Anatomy
1
2
- 1 Track — full-width container showing remaining progress
- 2 Fill — colored bar indicating completed progress
Variants
Color variants
Default
Positive
Negative
Size variants
sm
md (default)
lg
Indeterminate
Indeterminate
Table of options
| Property | Values | Default |
|---|---|---|
| value | 0–100 (number) | — |
| variant | default / positive / negative | default |
| size | sm / md / lg | md |
| label | text | none |
| showValue | true / false | false |
| indeterminate | true / false | false |
Behaviors
Determinate
When a known completion percentage is available, set value (0–100). The fill updates via CSS custom property.
Indeterminate
When completion time is unknown, use indeterminate. The fill animates continuously. Animation is suppressed when the user prefers reduced motion.
Usage guidelines
Choose the right variant for context
Do
Use positive to signal successful completion.
Don't
Don't use the default color for success states — it doesn't convey meaning.
Accessibility
- Uses
role="progressbar"witharia-valuenow,aria-valuemin, andaria-valuemax. - Always provide an
aria-labelvia thelabelattribute or a visually-hidden label. - Indeterminate bars omit
aria-valuenow. - The indeterminate animation respects
prefers-reduced-motion.
Theming
Progress Bar adapts across brands and modes through semantic tokens. For the full theming architecture see Foundations: Theming.
Design checklist
All brand/mode contextsWorks across light and dark modes.
Accessible use of colorVariant color is supplemented by label (WCAG 1.4.1).
ARIA attributesUses role="progressbar" with correct ARIA.
Reduced motionIndeterminate animation disabled for prefers-reduced-motion.
Defined optionsVariant, size, value, label documented.
Design tokensAll visual attributes as tokens.