Referencia API

Aquí tienes el contrato completo de loading: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta loading a tu gusto con 9 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	Dónde se sitúa el bloque. `inline` participa en el flujo normal del documento y reserva su propio espacio; `overlay` se posiciona en absoluto y cubre el ancestro posicionado más cercano; `fullscreen` queda fijado al viewport.
`variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	Qué indicador puramente CSS se renderiza. Se ignora mientras `image` esté fijado, ya que la imagen sustituye al indicador integrado.
`image`	`string \| null`	`null`	URL o data URI que se renderiza en lugar del indicador integrado, normalmente una marca. Su caja se dimensiona con `--hub-loading-image-size`.
`imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	Movimiento aplicado a `image`, inerte mientras no haya imagen. `spin` encaja con una marca radialmente simétrica, `pulse` mantiene un logotipo tipográfico derecho y legible, y `none` lo deja quieto.
`message`	`string \| null`	`null`	Texto que se renderiza bajo el indicador y que la región activa anuncia cuando aparece el bloque. Con `null` no se renderiza mensaje.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Paso de tamaño que alimenta `--hub-loading-size`. El token sigue siendo sobrescribible por su cuenta cuando una maquetación necesita un tamaño que los tres pasos no cubren.
`color`	`string \| null`	`null`	Acento del indicador, normalizado por `resolveHubAccent()` en la única ranura `--hub-loading-accent`. Un nombre suelto como `primary` se resuelve a un token `--hub-sys-color-*` y sigue el tema; un hex, un literal `oklch()` o una referencia `var(...)` se usan tal cual. Con `null` se mantiene el valor por defecto que el token trae en la cascada.
`backdrop`	`boolean`	`true`	Pinta el velo translúcido sobre el contenido cubierto. Se ignora en modo `inline`, que no cubre nada.
`ariaLabel`	`string`	`'Loading'`	Nombre accesible que anuncia la región activa del host a través de `role="status"`.

Outputs

Todavía no hay outputs documentados.

Métodos

Controla loading desde el código — 5 métodos en su superficie programática.

Nombre	Firma	Devuelve	Descripción
`HubLoadingService.show`	`show(options?: HubLoadingOptions): void`	`void`	Registra a un llamante y monta el overlay fullscreen si aún no está. Solo se aplican sobre los valores por defecto de la aplicación las claves realmente suministradas, de modo que las llamadas anidadas se componen en vez de reiniciarse entre sí.
`HubLoadingService.hide`	`hide(): void`	`void`	Retira a un llamante y desmonta el overlay en cuanto no queda ninguno. El contador se limita a cero, así que un `hide()` perdido no puede dejar sin efecto un `show()` posterior.
`HubLoadingService.hideAll`	`hideAll(): void`	`void`	Descarta de golpe a todos los llamantes pendientes y quita el overlay de inmediato. Es una salida de emergencia para manejadores de error y cambios de ruta, no un sustituto de los pares `show()` / `hide()` equilibrados.
`HubLoadingService.update`	`update(options: HubLoadingOptions): void`	`void`	Reviste el overlay en vivo — un mensaje de progreso que cambia a mitad de la operación, un cambio de variante — sin tocar el contador de referencias.
`HubLoadingService.isLoading`	`isLoading: Signal<boolean>`	`Signal<boolean> — true while at least one reference is held`	Signal que vale true mientras al menos un llamante siga esperando. Se puede leer sin riesgo durante el renderizado en servidor, donde el contador funciona pero no se monta ningún overlay.

Templates

Hazlo tuyo — 2 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`Ranura de contenido por defecto`	Todo lo proyectado entre las etiquetas se renderiza bajo el mensaje — una acción de cancelar, una nota de progreso o un aviso de que la operación está tardando más de lo habitual.	`<hub-loading message="Importing rows"><button type="button">Cancel</button></hub-loading>`
`provideHubLoading`	Registra los valores por defecto de toda la aplicación mediante el token `HUB_LOADING_CONFIG` — imagen de marca, variante preferida, etiqueta traducida —, de modo que `<hub-loading>` y `HubLoadingService` parten de ellos y cada punto de uso se mantiene escueto.	`providers: [provideHubLoading({ variant: 'ring', size: 'lg' })]`