Progress Bar
ProgressBar displays a horizontal progress bar with optional label, value display, size, and color variants.
Basic usage
65%
Tailwind v4
vue
<ProgressBar :value="65" />With label
Crusher throughput72%
Tailwind v4
vue
<ProgressBar :value="72" label="Crusher throughput" />Hide value
Tailwind v4
vue
<ProgressBar :value="40" :show-value="false" />Variants
Default80%
Success80%
Warning80%
Danger80%
Tailwind v4
vue
<ProgressBar :value="80" variant="default" />
<ProgressBar :value="80" variant="success" />
<ProgressBar :value="80" variant="warning" />
<ProgressBar :value="80" variant="danger" />| Variant | Fill color |
|---|---|
default (default) | --color-primary |
success | --color-success |
warning | --color-warning |
danger | --color-danger |
Sizes
Small (6px)60%
Medium (10px, default)60%
Tailwind v4
vue
<ProgressBar :value="60" size="sm" />
<ProgressBar :value="60" size="md" />Value clamping
The value prop is clamped between 0 and 100 — values outside that range are safely handled.
Accessibility
The track element has role="progressbar", aria-valuenow, aria-valuemin="0", and aria-valuemax="100".
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress percentage (0–100) |
variant | 'default' | 'success' | 'warning' | 'danger' | 'default' | Fill color |
label | string | — | Text label shown above the bar |
showValue | boolean | true | Show percentage number above the bar |
size | 'sm' | 'md' | 'md' | Track height |