K
KoreUI

Progress

UI

Indicadores de progreso en barra y círculo para mostrar avance de operaciones.

Uso básico

80% 
<x-kore::progress :value="65" />
<x-kore::progress :value="80" color="success" showValue />
<x-kore::progress :value="65" />
<x-kore::progress :value="80" color="success" showValue />

Con etiqueta y valor

Muestra etiqueta descriptiva y porcentaje.

Subiendo archivo... 45% 
<x-kore::progress :value="45" label="Subiendo archivo..." showValue />
<x-kore::progress :value="45" label="Subiendo archivo..." showValue />

Colores

Colores semánticos para la barra de progreso.

<x-kore::progress :value="60" color="primary" />
<x-kore::progress :value="60" color="success" />
<x-kore::progress :value="60" color="warning" />
<x-kore::progress :value="60" color="destructive" />
<x-kore::progress :value="60" color="info" />
<x-kore::progress :value="60" color="primary" />
<x-kore::progress :value="60" color="success" />
<x-kore::progress :value="60" color="warning" />
<x-kore::progress :value="60" color="destructive" />
<x-kore::progress :value="60" color="info" />

Color automático

Cambia de color según el porcentaje: destructive, warning, success.

20%
50%
85% 
<x-kore::progress :value="20" color="auto" showValue />
<x-kore::progress :value="50" color="auto" showValue />
<x-kore::progress :value="85" color="auto" showValue />
<x-kore::progress :value="20" color="auto" showValue />
<x-kore::progress :value="50" color="auto" showValue />
<x-kore::progress :value="85" color="auto" showValue />

Tamaños

Tres tamaños: sm, md (default), lg.

<x-kore::progress :value="50" size="sm" />
<x-kore::progress :value="50" size="md" />
<x-kore::progress :value="50" size="lg" />
<x-kore::progress :value="50" size="sm" />
<x-kore::progress :value="50" size="md" />
<x-kore::progress :value="50" size="lg" />

Rayas animadas

Patrón de rayas con animación opcional.

<x-kore::progress :value="70" striped />
<x-kore::progress :value="70" striped animated color="info" />
<x-kore::progress :value="70" striped />
<x-kore::progress :value="70" striped animated color="info" />

Indeterminado

Animación continua para progreso desconocido.

Procesando... 
<x-kore::progress indeterminate label="Procesando..." />
<x-kore::progress indeterminate label="Procesando..." />

Progress Circle

Indicador circular de progreso con SVG.

75%
100%
45% 
<x-kore::progress.circle :value="75" />
<x-kore::progress.circle :value="100" color="success" showValue />
<x-kore::progress.circle :value="45" color="warning" showValue />
<x-kore::progress.circle :value="75" />
<x-kore::progress.circle :value="100" color="success" showValue />
<x-kore::progress.circle :value="45" color="warning" showValue />

Circle tamaños

Cuatro tamaños para el circle: sm, md, lg, xl.

50%
50%
50%
50% 
<x-kore::progress.circle :value="50" size="sm" />
<x-kore::progress.circle :value="50" size="md" />
<x-kore::progress.circle :value="50" size="lg" />
<x-kore::progress.circle :value="50" size="xl" showValue />
<x-kore::progress.circle :value="50" size="sm" />
<x-kore::progress.circle :value="50" size="md" />
<x-kore::progress.circle :value="50" size="lg" />
<x-kore::progress.circle :value="50" size="xl" showValue />

Props

Prop Tipo Default Descripción
value int|float 0 Valor actual
max int|float 100 Valor máximo
size string md Tamaño: sm, md, lg
color string primary Color: primary, success, warning, destructive, info, auto
showValue bool false Muestra el porcentaje
indeterminate bool false Animación de progreso indeterminado
striped bool false Patrón de rayas
animated bool false Anima las rayas (requiere striped)
label string|null null Etiqueta descriptiva

Props (Circle)

Props

Prop Tipo Default Descripción
value int|float 0 Valor actual (0-100)
size string md Tamaño: sm, md, lg, xl
color string primary Color: primary, success, warning, destructive, info
showValue bool true Muestra el porcentaje en el centro
strokeWidth int 8 Grosor del trazo SVG