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.
API
Deprecated - Pending removal
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))
Constantly animates, use when loading progress is unknown.
Rotates the circle start point in deg
Sets the diameter of the circle in pixels
The percentage value for current progress
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.