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.
Deprecated - Pending removal
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
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
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
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
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.
You can also set the color using the props