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.

Go to api


By default, progress circular uses the applications secondary color.

Alternate colors can be applied.

An indeterminate progress circular animates forever.

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.

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

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

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