'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Avisos
Progress y Meter
Cuánto avanza una tarea, y cuánto de algo se usa.
import { ProgressBar, ProgressCircle, Meter, ProgressSegments } from '@alea/ui';
Ejemplos
Barra de progreso
Determinada con un valor, indeterminada sin él.
Círculo de progreso
Para lugares compactos.
Meter
Una cantidad dentro de un rango. tone="auto" cambia a advertencia y peligro al llenarse.
Segmentos
Una barra dividida en partes: un meter que nombra cada parte.
Tonos, tamaños, franjas y el valor al final
tone colorea el relleno; striped muestra trabajo en curso; valuePosition="end" pone el valor después de la barra; description agrega una línea debajo. ProgressCircle acepta tonos, thickness, xl y tu propio centro.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Show Value
showValue - Size
size - Striped
striped - Tone
tone - Value Position
valuePosition
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-border…--alea-gradient-accent-linear…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…--alea-surface-raised…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-medium…
Motion
--alea-motion-duration-slow…--alea-motion-ease-in-out…--alea-motion-ease-out…
Component
--alea-progress-tone…
Props
ProgressBar props
Cuánto avanzó una tarea: tonos, tres tamaños, franjas, el valor arriba o al final, y una descripción. Sin value es indeterminada.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Una línea bajo la barra: "3 de 12 archivos", "Faltan unos 2 minutos". |
label | ReactNode | - | La etiqueta visible. |
showValue | boolean | - | Muestra el porcentaje (o valueLabel). Por defecto true con una etiqueta o con valuePosition="end". |
size | "sm" | "md" | "lg" | 'md' | Altura del riel: sm 4 px, md 8 px (por defecto) o lg 12 px. |
striped | boolean | - | Franjas en movimiento sobre el relleno, para trabajo en curso. |
tone | "danger" | "accent" | "success" | "warning" | "info" | - | El color del relleno: accent (por defecto, el degradado), success, warning, danger o info. |
valuePosition | "end" | "top" | 'top' | Dónde se muestra el valor: top (junto a la etiqueta, por defecto) o end (después de la barra). |
ProgressCircle props
Progreso circular, para lugares compactos: cuatro tamaños, tonos, grosor y cualquier cosa en el centro.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
children | ReactNode | - | Tu propio contenido en el centro: un ícono, un avatar, "3/5". |
showValue | boolean | - | Muestra el porcentaje en el centro (desde md). |
size | "sm" | "md" | "lg" | "xl" | 'md' | sm 24, md 40 (por defecto), lg 64, xl 96 px. |
thickness | number | 5 | Grosor del anillo en el dibujo de 48 unidades: 3 (fino), 5 (por defecto) u 8 (grueso). |
tone | "danger" | "accent" | "success" | "warning" | "info" | - | El color del anillo: accent (por defecto), success, warning, danger o info. |
Meter props
Una cantidad medida dentro de un rango conocido (almacenamiento, fuerza de contraseña, contraste). No es progreso.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
label | ReactNode | - | La etiqueta visible. |
showValue | boolean | true | Muestra el valor junto a la etiqueta. Por defecto true. |
tone | "auto" | "neutral" | "accent" | "success" | "warning" | "danger" | "info" | 'accent' | Color por nivel: auto pasa a warning sobre el 70% y a danger sobre el 90% (almacenamiento, cuota). |
ProgressSegments props
Una barra dividida en partes: almacenamiento por tipo, presupuesto por equipo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | ReactNode | - | Nombre de la barra ("Almacenamiento"). |
segmentsobligatoria | { label: string; value: number; color?: string | undefined; }[] | - | Las partes: label, value y un color opcional (por defecto los colores de gráficos). |
className | string | - | |
showLegend | boolean | true | Muestra la leyenda bajo la barra. Por defecto true. |
total | number | - | El total. Por defecto la suma de los valores. |
valueFormat | ((v: number) => string) | v | Da formato a cada valor en la leyenda, por ejemplo v => `${v} GB`. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Size
Oscuro
size="sm" | size="md" | |
|---|---|---|
Upload60 % | Upload60 % |
Claro
size="sm" | size="md" | |
|---|---|---|
Upload60 % | Upload60 % |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
ProgressBar
- Variantes
sizesmmdlgtonedangeraccentsuccesswarninginfovaluePositionendtop- Estados
- Indeterminate
- Motion
- draw
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-progress.alea-progress-head.alea-progress-value.alea-progress-row.alea-progress-track.alea-progress-fill- Atributos data
data-size=smdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-tone=neutraldata-tonedata-size=lgdata-striped
ProgressCircle
- Variantes
sizesmmdlgxltonedangeraccentsuccesswarninginfo- Estados
- Indeterminate
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-progress-circle.alea-progress-circle-arc.alea-progress-circle-value- Atributos data
data-size=smdata-size=lgdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-size=xl
Meter
- Variantes
toneautoneutralaccentsuccesswarningdangerinfo- Estados
- Indeterminate
- Motion
- draw
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-progress.alea-meter.alea-progress-head.alea-progress-value.alea-progress-track.alea-progress-fill- Atributos data
data-size=smdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-tone=neutraldata-tonedata-size=lgdata-striped
ProgressSegments
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-progress-seg.alea-progress-seg-head.alea-progress-seg-total.alea-progress-seg-bar.alea-progress-seg-part.alea-progress-seg-legend
Accesibilidad
- Las barras de progreso y los medidores se anuncian con su valor; ponles nombre.
Qué hacer y qué evitar
Hacer
- Usa ProgressBar para tareas y Meter para cantidades (almacenamiento, puntaje).
- Dale una etiqueta para que los lectores de pantalla digan qué avanza.
Evitar
- No uses una barra determinada cuando no puedes saber el avance: usa isIndeterminate.
- No muestres una barra para cosas que terminan en menos de un segundo.