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. Circular progress component contains a slot that is centered within the component container.

Usage

By default, progress circular uses the applications secondary color.


API

Examples

Colored

Alternate colors can be applied.


Indeterminate

An indeterminate progress circular animates forever.


Size & Width

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


Rotate

The progress origin can be rotated.


Determinate

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


Indeterminate

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


Buffer

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.