Spinner y overlay de carga para Angular | ng-hub-ui-loading

Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Bloque inline

`inline` es el modo por defecto porque una región todavía vacía debería reservar ya el espacio que ocupará su contenido: el bloque participa en el flujo normal del documento, así que nada salta cuando llega el contenido real. `message` se renderiza bajo el indicador, y todo lo proyectado entre las etiquetas se renderiza bajo el mensaje — el sitio para una acción de cancelar o un aviso de que la operación está tardando más de lo habitual. El host lleva `role="status"`, `aria-live="polite"` y `aria-busy="true"`, de modo que un lector de pantalla recoge el mensaje al aparecer sin interrumpir lo que ya estaba leyendo.

Indicadores y acentos

La biblioteca incluye cinco indicadores puramente CSS — `spinner`, `dots`, `bars`, `pulse` y `ring` —, así que no arrastra ninguna imagen ni fuente de iconos. Tres pasos de tamaño preconfiguran `--hub-loading-size`, y el token sigue siendo sobrescribible por su cuenta cuando una maquetación necesita un tamaño que esos pasos no cubren. `color` no es un color CSS corriente: pasa por `resolveHubAccent()`, que interpreta un nombre suelto como `primary` como token del sistema de diseño y sigue el tema, mientras que un hex, un literal `oklch()` o una referencia `var(...)` se usan tal cual.

Overlay y fullscreen

`overlay` cubre una región en lugar de la página. Se posiciona en absoluto, así que el ancestro posicionado más cercano decide qué queda cubierto — dale `position: relative` a ese contenedor o el overlay se escapa hacia arriba, hasta el ancestro que resulte estar posicionado. Acotarlo así mantiene el resto de la pantalla desplazable y utilizable. `fullscreen` queda fijado al viewport y es lo que `HubLoadingService` monta sobre `document.body`, fuera de todo subárbol de componentes, de forma que ningún `overflow` ni contexto de apilamiento de un ancestro puede recortarlo. Ambos modos pintan el velo translúcido salvo que se desactive `backdrop`.

Marca y tematización

`image` cambia el indicador integrado por una marca propia, animada con `none`, `spin` o `pulse`: `spin` solo funciona bien sobre una marca radialmente simétrica, mientras que `pulse` mantiene un logotipo tipográfico derecho y legible. Todo lo visual vive en los tokens `--hub-loading-*`, declarados en `:where(.hub-loading)` para que cualquier ancestro pueda fijarlos — acento, tamaño, velocidad, grosor de trazo, separación, tamaño de imagen, color del texto y el tinte y desenfoque del backdrop. El mixin de Sass `hub-loading-theme()` fija toda la escalera de tokens en una sola llamada, y `provideHubLoading()` rebasa los valores por defecto de una aplicación entera sin tocar ninguna plantilla.

Imagen de marca

Preparing your report

imageAnimation="none"

Preparing your report

imageAnimation="spin"

Preparing your report

imageAnimation="pulse"

Any URL works — an asset path, an imported file or, as here, an inline data URI. Size the mark with --hub-loading-image-size rather than size, which drives the built-in indicators.

Barra de progreso de página

`hub-loading-bar` es la franja fina que avisa de que la página misma está en camino: la que va bajo la barra de navegación. Tres decisiones la hacen creíble. Cuenta a quienes la piden, así que una navegación y las tres peticiones que lanza la página son cuatro referencias, y la barra termina con la última, no con la primera. Espera antes de pintar nada: el trabajo que acaba dentro del periodo de gracia no llega a mostrar barra, porque una ruta de 40 ms que hace parpadear un indicador de progreso se lee como un fallo, no como velocidad. Y su avance se frena a medida que se llena y se detiene antes del final: aquí nadie conoce el porcentaje real, de modo que solo `complete()` puede mostrar el 100 %, porque solo `complete()` sabe que es cierto. Colócala con `mode="overlay"` dentro de una barra de navegación posicionada, o con `mode="fixed"` y `--hub-loading-bar-offset` cuando la barra de navegación también está fijada.