Progress
The v-progress-circular and v-progress-linear components are used to convey data visually to users. They can also represent an indeterminate amount, such as loading or processing. These components contains a slot that is centered within the component container.

Examples

#1 Default
edit
By default, progress circular uses the applications secondary color.

#2 Colored
edit
Alternate colors can be applied.

#3 Indeterminate
edit
An indeterminate progress circular animates forever.

#4 Size & Width
edit
The progress circular component can have an altered width and size.

#5 Rotate
edit
The progress origin can be rotated.

#6 Determinate
edit
The progress linear component can have a determinate state modified by v-model.

#7 Indeterminate
edit
Just as with the progress circular component, progress linear has an indeterminate state.

#8 Buffer
edit
A buffer state represents two values simultaneously. The primary value is controled by the model, whereas the buffer is controlled by the buffer-value prop.

#9 Query Indeterminate and Determinate
edit
To query state is controlled by the truthiness of indeterminate with the query prop set to true.

#10 Custom height and contextual colors
edit
A custom height or contextual color can be applied to a progress bar. The bars primary color is your applications primary color.

API

chevron_leftchevron_right