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

NameDefaultType
fakeboolean
Will randomly increment but never actually reach the end
colorvar(--color-accent)string
Indicator color. Use CSS color values or variables
fixedboolean
Displays loader at the top of the page
heightnumber string
Height of the progress bar

Events

NamePayloadType
doneEmitted 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