Spinner y overlay de carga para Angular | ng-hub-ui-loading
Componente de carga para Angular con indicadores spinner, dots, bars, pulse y ring en modo inline, overlay y fullscreen, más un servicio para overlays bloqueantes de toda la aplicación.
Última actualización 24 ago 2026
Visión General
Por qué los equipos buscan esta librería
Usa ng-hub-ui-loading cuando una sección, un contenedor o la aplicación entera deba indicar que hay trabajo en curso, sin que cada vista se fabrique su propio spinner y su propia capa.
Instalación
npm install ng-hub-ui-loadingIr a
Ideal para
- carga de rutas y datos
- overlays al enviar formularios
- operaciones bloqueantes de toda la aplicación
- pantallas de arranque con marca
Sobre loading
ng-hub-ui-loading es un componente standalone de Angular que representa un estado de carga indeterminado en tres modos: `inline` como bloque en el flujo del documento, `overlay` posicionado en absoluto sobre su contenedor padre y `fullscreen` fijado al viewport. Incluye cinco indicadores en CSS puro —spinner, dots, bars, pulse y ring— en tres tamaños, un mensaje opcional y una imagen de marca opcional animada con `none`, `spin` o `pulse`. `HubLoadingService` gobierna el overlay global a pantalla completa de forma programática y lleva un recuento de referencias de las llamadas concurrentes, de modo que dos peticiones en paralelo nunca se retiran el overlay la una a la otra. Cada color, tamaño y duración es una propiedad personalizada `--hub-loading-*`, con el mixin de Sass `hub-loading-theme()` para redefinir el conjunto; el componente es accesible de serie mediante `role=status`, `aria-live=polite` y `aria-busy`, y respeta `prefers-reduced-motion`.
Guías de uso
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.
Ejemplos:
Fundamentos del bloque inline
El bloque inline en sus tres formas útiles: solo indicador, indicador con mensaje, y un mensaje con una acción de cancelar proyectada debajo.
The block is announced as role="status" with aria-live="polite", so a screen reader reads the message when it appears without interrupting whatever is being read.
Código
Import:
Template:
Component:
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.
Ejemplos:
Variantes, tamaños y acentos
Los cinco indicadores incluidos, los tres pasos de tamaño y las tres formas que puede adoptar un acento — un nombre semántico, un literal de color CSS y una referencia `var(...)`.
Variants
spinnerdotsbarspulseringSizes
size="sm"size="md"size="lg" Each step is a preset for the --hub-loading-size token. Override that token directly when a layout needs a size the three steps do not cover.
Accents
color="primary"color="success"color="danger"color="#7c3aed"color="var(--hub-sys-color-warning)" A bare name resolves to var(--hub-sys-color-<name>) and tracks the active theme. A hex, an oklch() or a var(...) is used verbatim.
Código
Import:
Template:
Component:
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`.
Ejemplos:
Overlay de contenedor
Un overlay acotado a una tarjeta por el `position: relative` de esa misma tarjeta, dejando desplazable el resto de la página. Conmuta el backdrop para ver la diferencia entre un refresco en segundo plano y un trabajo que invalida lo que hay en pantalla.
Order #4821
3 items · delivered 14 Aug 2026
- Subtotal
- 212.00 €
- Shipping
- 9.90 €
- VAT (21%)
- 26.70 €
- Total
- 248.60 €
Turn the backdrop off to keep the content readable underneath — useful when the work is a background refresh rather than something that invalidates what is on screen.
Código
Import:
Template:
Component:
Servicio fullscreen
`HubLoadingService` gobernado desde TypeScript. Dos peticiones solapadas muestran por qué importa el contador de referencias: el primer `hide()` deja el overlay en pie porque el segundo llamante aún retiene una referencia, y `update()` reescribe el mensaje en pleno vuelo.
hideAll() after 5 seconds no matter what. Nothing yet.
Código
Import:
Template:
Component:
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.
Ejemplos:
Imagen de marca
Una marca propia sustituye al indicador integrado y se muestra con las tres animaciones de imagen, para que se vea el compromiso entre `spin`, `pulse` y `none`.
imageAnimation="none"imageAnimation="spin"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.
Código
Import:
Template:
Component:
Tematización con variables CSS
Tematización en vivo mediante los tokens `--hub-loading-*` fijados en un elemento contenedor, incluidos el tinte y el desenfoque del backdrop, que solo hacen algo en los modos `overlay` y `fullscreen`.
Overlay preview
The backdrop tint and blur only apply in overlay and fullscreen modes. The tint is mixed from --hub-sys-surface-page, so it veils this text with the theme's own surface instead of a fixed colour — drop it to zero and the card stays fully legible underneath.
The same overrides written once, in Sass, are in the CSS tab — that is what hub-loading-theme() is for.
Código
Import:
Template:
Component:
Características clave
Cambios recientes
Version 22.0.0 - 8/24/26, 12:00 AM
added: Initial release of hub-loading: one component covering the inline block, the container overlay and the fullscreen layer, with role="status", aria-live="polite" and aria-busy set on the host.
added: Five pure-CSS indicators — spinner, dots, bars, pulse and ring — in three size steps, with no image or font dependency.
added: Accent resolution through resolveHubAccent() from ng-hub-ui-utils: a bare name becomes a --hub-sys-color-* token and follows the theme, while a hex, an oklch() or a var(...) is used verbatim.
added: Optional image input with none, spin and pulse animations, replacing the built-in indicator with a brand mark.
added: HubLoadingService for the fullscreen overlay, with a reference counter so concurrent callers cannot unblock the screen out from under each other, plus update() to re-dress the live overlay and hideAll() to force the count to zero. SSR-safe: a no-op without a DOM.
added: provideHubLoading() and the HUB_LOADING_CONFIG token, supplying application-wide defaults to both the component and the service.
added: Theming through the --hub-loading-* token ladder and the hub-loading-theme() Sass mixin, shipped at ng-hub-ui-loading/styles.