Progress Bar
Linear progress indicator with determinate and indeterminate modes, sizes, color variants, and an optional label and percentage.
Preview
<ProgressBar value={68} label="Uploading" showValue={true} />Variants
<ProgressBar value={60} variant="primary" />
<ProgressBar value={60} variant="success" />
<ProgressBar value={60} variant="warning" />
<ProgressBar value={60} variant="danger" />Sizes
<ProgressBar value={50} size="xs" />
<ProgressBar value={50} size="sm" />
<ProgressBar value={50} size="md" />
<ProgressBar value={50} size="lg" />Label & indeterminate
Add a label (and showValue for the percentage) above the track. Indeterminate mode runs a looping translate animation when the completion is unknown.
<ProgressBar value={40} label="Processing" showValue={true} variant="warning" />
<ProgressBar mode="indeterminate" label="Loading…" />API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress, clamped to 0–100. Ignored in indeterminate mode. |
mode | 'determinate' | 'indeterminate' | 'determinate' | Determinate fill vs a looping indeterminate animation. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Track height (2 / 4 / 8 / 12px). |
variant | 'primary' | 'success' | 'warning' | 'danger' | 'primary' | Fill color intent. |
label | string | '' | Optional text shown above the track; also used as the accessible label. |
showValue | boolean | true | Shows the percentage next to the label (determinate only). |
Accessibility
- Renders
role="progressbar"witharia-valuemin="0"andaria-valuemax="100". aria-valuenowis set in determinate mode and omitted while indeterminate.aria-labelfalls back to "Progress" when nolabelis provided.