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. The circular progress component contains a slot that is centered within the circle.


By default, progress circular uses the applications secondary color.





Alternate colors can be applied.


An indeterminate progress circular animates forever.

Size & Width

The progress circular component can have an altered width and size.


The progress origin can be rotated.


The progress linear component can have a determinate state modified by v-model.


Just as with the progress circular component, progress linear has an indeterminate state.


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.

Query Indeterminate and Determinate

To query state is controlled by the truthiness of indeterminate with the query prop set to true.

Custom height and contextual colors

A custom height or contextual color can be applied to a progress bar. The bars primary color is your applications primary color.

Custom colors

You can also set the color using the props color and background-color.

Edit this page | language on Github