Avisos

LoadingOverlay

Cubre una región mientras carga, mantiene el diseño en su lugar y avisa a los lectores de pantalla que está ocupada.

import { LoadingOverlay } from '@alea/ui';

Ejemplos

Recargar en el lugar

La tabla se queda donde está; no se puede hacer clic mientras carga.

Plugin	Users
Contrast Checker	3,410
Palette Generator	1,240

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-bg…

Motion

--alea-motion-duration-base…
--alea-motion-ease-out…

Props

`LoadingOverlay` props

Cubre una región mientras carga, la mantiene en su lugar y avisa a los lectores de pantalla que está ocupada.

Prop	Tipo	Por defecto	Descripción
`children`obligatoria	`ReactNode`	-	El contenido que cubre.
`isLoading`obligatoria	`boolean`	-	Muestra el overlay y marca el contenido como ocupado.
`blur`	`boolean`	`true`	Desenfoca el contenido de abajo. Por defecto true.
`className`	`string`	-
`label`	`string`	-	Qué está cargando, para lectores de pantalla. Por defecto "Cargando".

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.

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-loading.alea-loading-content.alea-loading-overlay
Atributos data: data-blur

La región recibe aria-busy y su contenido queda inerte, así nada adentro recibe foco ni clics mientras carga.

Qué hacer y qué evitar

Hacer

Úsalo para una región que se recarga en su lugar (una tabla después de un filtro).

Evitar

No cubras toda la página por una actualización pequeña.