Progress
FeedbackA progress bar to indicate completion or loading.
Playground
Controls
Current value.
Maximum value.
Bar thickness.
Color.
Display percentage.
Optional text label.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | 0 | Current value. |
max | number | 100 | Maximum value. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Bar height. |
variant | 'primary' | 'success' | 'warning' | 'danger' | 'primary' | Color. |
label | string | — | Accessible label and display text. |
showValue | boolean | false | Show percentage value. |
Examples
65%
vue
<DsProgress :value="65" />Success
Completed
vue
<DsProgress
:value="100"
variant="success"
label="Completed"
/>Warning
78%
vue
<DsProgress
:value="78"
variant="warning"
showValue
/>Danger
Storage full
vue
<DsProgress
:value="23"
variant="danger"
label="Storage full"
/>Thin
vue
<DsProgress
:value="50"
size="xs"
/>Skeleton
Use DsProgressSkeleton as a loading placeholder while content is being fetched.
With label
vue
<DsProgressSkeleton showLabel />No label
vue
<DsProgressSkeleton :showLabel="false" />Small
vue
<DsProgressSkeleton
:showLabel="false"
size="sm"
/>Large
vue
<DsProgressSkeleton
showLabel
size="lg"
/>Accessibility
- Uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.
- Provide a label for screen reader context.