Progress
The Progress component is a flexible progress indicator that can be used to show loading states, file upload progress, or any other progress-related information. It supports both determinate and indeterminate states, and can be displayed as a fixed bar at the top of the page.
Props
The value of the progress component is controlled via v-model
| Name | Default | Type |
|---|---|---|
fake | — | boolean Will randomly increment but never actually reach the end |
color | var(--color-accent) | string Indicator color. Use CSS color values or variables |
fixed | — | boolean Displays loader at the top of the page |
height | — | number string Height of the progress bar |
Events
| Name | Payload | Type |
|---|---|---|
done | — | Emitted when the progress reaches 100% |
Examples
The following example shows different variations of the progress component.
Fixed Progress (top of page)
Custom Color
Fake Progress
Custom Height
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-progress-height | 3px | Bar height |
--vui-progress-color | var(--color-text-lighter) | Fill color |
--vui-progress-track-color | var(--color-bg-raised) | Track color |