'/%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
Spinner y Skeleton
Estados de espera: un spinner para esperas cortas, skeletons para contenido que viene en camino. InlineLoading es una línea de estado que pasa de un spinner a un check o un error.
import { Spinner, Skeleton, InlineLoading } from '@alea/ui';
Ejemplos
Spinner
Para esperas cortas.
Skeleton
La forma de lo que viene. Marca la región con aria-busy.
InlineLoading
Una línea de estado para una acción: un spinner mientras trabaja, un check que se dibuja solo al tener éxito, o un error. Los lectores de pantalla escuchan cada cambio.
Loader que cambia de forma
variant="morph" es una forma suave que gira y cambia de forma, más tranquila que un anillo para esperas largas. Tres tamaños; más lento con movimiento reducido.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Size
size - Variant
variant
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
Cada tamaño y espacio es múltiplo de 4 px.
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-gradient-accent-linear…--alea-text…
Motion
--alea-motion-ease-in-out…
Props
Spinner props
Un anillo de carga indeterminado con el degradado de acento.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Qué está cargando, para lectores de pantalla. Por defecto "Cargando". |
className | string | - | Clases extra. |
size | "sm" | "md" | "lg" | 'md' | sm 16, md 24 (por defecto), lg 40 px. |
variant | "morph" | "ring" | "dots" | 'ring' | ring (por defecto); dots: una matriz de 4 × 4 puntos que late en una ola; morph: una forma suave que gira y cambia de forma, para esperas más largas. |
Skeleton props
Un relleno con un brillo suave mientras carga el contenido. Oculto para lectores de pantalla; marca la región con aria-busy.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
animation | "none" | "pulse" | "shimmer" | - | shimmer (un barrido de luz, por defecto), pulse (aparece y desaparece) o none. |
height | string | number | - | Altura, en px o cualquier medida CSS. |
isLoaded | boolean | - | Cuando es true, muestra children en su lugar, con un fundido. |
lines | number | 1 | Cantidad de líneas de texto (la última más corta). |
shape | "text" | "circle" | "rect" | 'text' | text: líneas de texto; rect: un bloque; circle: un avatar. |
width | string | number | - | Ancho, en px o cualquier medida CSS. |
InlineLoading props
Una pequeña línea de estado para una acción en curso: un spinner, luego un check o un error, con texto. Los lectores de pantalla escuchan cada cambio.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
statusobligatoria | "error" | "idle" | "success" | "loading" | - | idle (nada), loading (spinner), success (un check que se dibuja solo) o error. |
children | ReactNode | - | El texto del estado actual, como "Guardando…", "Guardado", "No se pudo guardar". |
className | string | - | Clases extra. |
onSuccessEnd | (() => void) | - | Se llama después de que success se mostró durante successDuration. |
successDuration | number | 1500 | Después de success, espera este tiempo (ms) y llama a onSuccessEnd: para volver a idle o seguir. Por defecto 1500. |
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" | size="lg" | |
|---|---|---|---|
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Spinner
- Variantes
sizesmmdlgvariantmorphringdots- Motion
- more
- 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-spinner.alea-morph-loader.alea-dot-loader.alea-spinner-grad- Atributos data
data-size=smdata-size=lg
Skeleton
- Variantes
animationnonepulseshimmershapetextcirclerect- Motion
- more
- 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-skeleton-reveal.alea-skeleton-lines.alea-skeleton- Atributos data
data-shape=textdata-shape=rectdata-shape=circledata-animation=pulsedata-animation=none
InlineLoading
- Variantes
statuserroridlesuccessloading- 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-inline-loading.alea-inline-check.alea-inline-loading-text- Atributos data
data-status=successdata-status=error
Accesibilidad
- Los skeletons se ocultan a los lectores de pantalla; pon aria-busy en la región que carga.
Qué hacer y qué evitar
Hacer
- Muéstralo solo después de unos 300 ms, para que las cargas rápidas no parpadeen.
- Dale un aria-label cuando la razón no es obvia.
Evitar
- No uses varios spinners en una pantalla: un Skeleton se lee mejor para contenido.
- No bloquees toda la página con un spinner por una parte pequeña.