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
Components.Progress.
コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccess
やpurple
)や、CSSの色指定(#033
やrgba(255, 0, 0, 0.5)
)を設定できます。
Components.Progress.
Components.Progress.
Components.Progress.
Components.Progress.
Components.Progress.
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
.