Progress
A linear progress bar, determinate when you know the percentage and indeterminate when you don't.
Indeterminate
Leaving value off switches the bar to a scanning animation. Prefer that over faking a percentage you can't actually measure.
Sizes
Showing the number
label is for screen readers only — the bar renders no text of its own, so put any visible percentage in your own markup above it.
Importing records0%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0–100. Omit for indeterminate mode. | |
| size | 'sm' | 'md' | 'lg' | 'md' | Track height. |
| label | string | 'Progress' | Accessible label. Not rendered visually, so pair it with your own heading if the bar needs a visible name. |