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

Usage

By default, progress circular uses the applications secondary color.


API

v-progress-circular
Name
button
Default
false
Type
boolean

Deprecated - Pending removal

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
indeterminate
Default
false
Type
boolean

Constantly animates, use when loading progress is unknown.

Name
rotate
Default
0
Type
number

Rotates the circle start point in deg

Name
size
Default
32
Type
number | string

Sets the diameter of the circle in pixels

Name
value
Default
0
Type
number | string

The percentage value for current progress

Name
width
Default
4
Type
number

Sets the stroke of the circle in pixels

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.