Progress

Los componentes v-progress-circular y v-progress-linear se usan para transmitir datos visualmente a los usuarios. Pueden también representar una cantidad indeterminada, como un procesamiento o una carga (loading). Estos componentes contienen un slot que está centrado dentro del componente que lo contiene.

Uso

By default, progress circular uses the applications secondary color.

API

v-progress-circular
Nombre
button
Default
false
Type
boolean

Components.Progress.

Nombre
color
Default
undefined
Type
string

Aplica el color especificado al control.

Nombre
indeterminate
Default
false
Type
boolean

Components.Progress.

Nombre
rotate
Default
0
Type
number | string

Components.Progress.

Nombre
size
Default
32
Type
number | string

Configura la altura y el ancho del elemento

Nombre
value
Default
0
Type
number | string

Controla la visibilidad

Nombre
width
Default
4
Type
number | string

El ancho del contenido

Ejemplos

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore