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 17 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`hub-loading · 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.
`hub-loading · 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.
`hub-loading · 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`.
`hub-loading · 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.
`hub-loading · 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.
`hub-loading · 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.
`hub-loading · 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.
`hub-loading · backdrop`	`boolean`	`true`	Pinta el velo translúcido sobre el contenido cubierto. Se ignora en modo `inline`, que no cubre nada.
`hub-loading · ariaLabel`	`string`	`'Loading'`	Nombre accesible que anuncia la región activa del host a través de `role="status"`.
`hub-loading · appendTo`	`string \| null`	`'body'`	Selector CSS del elemento al que se muda un indicador `fullscreen`; con `null`, o con un selector que no encuentre nada, se queda donde lo declara la plantilla. Los modos `inline` y `overlay` no se mueven nunca.
`hub-loading-bar · mode`	`'inline' \| 'overlay' \| 'fixed'`	`'inline'`	Dónde se sitúa la franja. `inline` participa en el flujo normal y reserva su propia fila, así que nada se desplaza cuando aparece; `overlay` se posiciona en absoluto contra el ancestro posicionado más cercano —la barra de navegación a la que le has puesto `position: relative`—; `fixed` la fija al viewport a la distancia de `--hub-loading-bar-offset`.
`hub-loading-bar · placement`	`'top' \| 'bottom'`	`'top'`	A qué borde se anclan los modos `overlay` y `fixed`. `bottom` es lo que cuelga la barra del canto inferior de una barra de navegación; `inline` lo ignora.
`hub-loading-bar · progress`	`number \| null \| undefined`	`undefined`	Toma el control de la barra. Sin enlazar sigue a `HubLoadingBarService`; un número de 0 a 100 la gobierna directamente y se publica como `aria-valuenow`; `null` la oculta.
`hub-loading-bar · indeterminate`	`boolean`	`false`	Desplaza un fragmento de un lado a otro en lugar de llenarse, para trabajo sin progreso medible. El valor anunciado se retiene, que es como ARIA marca una barra de progreso de posición desconocida.
`hub-loading-bar · glow`	`boolean`	`true`	Resplandor suave tras el borde de avance: el detalle que se sigue leyendo como movimiento entre dos pasos del avance automático.
`hub-loading-bar · color`	`string \| null`	`null`	Acento del relleno. Un nombre suelto se resuelve como token `--hub-sys-color-*` y sigue al tema; un hex, un `oklch()` o un `var(...)` se usa tal cual.
`hub-loading-bar · ariaLabel`	`string`	`'Loading'`	Nombre accesible para el `role="progressbar"` del host.

Outputs

Todavía no hay outputs documentados.

Métodos

Controla loading desde el código — 14 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.
`HubLoadingBarService.start`	`start(): void`	`void`	Registra una petición. La primera inicia un ciclo —tras el periodo de gracia, no de inmediato— y las demás solo se suman a la cuenta.
`HubLoadingBarService.complete`	`complete(): void`	`void`	Retira una petición. Cuando no queda ninguna, la barra llega al 100 % y se desvanece, o desaparece sin haberse visto si el periodo de gracia se tragó toda la operación.
`HubLoadingBarService.completeAll`	`completeAll(): void`	`void`	Descarta todas las peticiones pendientes y cierra la barra de golpe. Para un manejador de errores, o para quien nunca compensó su `start()`.
`HubLoadingBarService.set`	`set(value: number): void`	`void`	Lleva la barra a un valor exacto y la muestra sin esperar el periodo de gracia. Para trabajo con un porcentaje real; el valor se limita a 0–100, pero no al techo del avance automático.
`HubLoadingBarService.inc`	`inc(amount?: number): void`	`void`	Avanza la barra y la muestra. Sin cantidad decide la curva de avance configurada, que es lo que mantiene en movimiento una espera desconocida sin que llegue nunca.
`HubLoadingBarService.reset`	`reset(): void`	`void`	Cancela todo de una vez: sin animación de cierre, sin peticiones pendientes, sin nada en pantalla.
`HubLoadingBarService.progress`	`progress: Signal<number>`	`Signal<number> — the current fill, 0–100`	Relleno actual, de 0 a 100. Se puede leer sin riesgo durante el renderizado en servidor.
`HubLoadingBarService.isActive`	`isActive: Signal<boolean>`	`Signal<boolean> — true while at least one caller is waiting`	Si queda alguien esperando: la pregunta honesta de «¿está cargando la página?», al margen de que la barra haya decidido mostrarse o no.
`HubLoadingBarService.isVisible`	`isVisible: Signal<boolean>`	`Signal<boolean> — true only while the bar is painted`	Si la barra está realmente pintada. Falso durante el periodo de gracia, y todavía cierto durante la cola de cierre.

Templates

Hazlo tuyo — 7 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' })]`
`Barra bajo la navegación`	La colocación que da nombre a la barra. `position: relative` en la barra de navegación es lo que confina el overlay a ella, y `placement="bottom"` la cuelga del canto inferior.	`<nav class="navbar position-relative"> <hub-loading-bar mode="overlay" placement="bottom" /> </nav>`
`provideHubLoadingBarRouter`	Mantiene la barra exactamente lo que dura una navegación, incluida una que rechaza un guard o que termina en error: los dos casos en los que una barra cableada a mano se queda colgada.	`providers: [provideRouter(routes), provideHubLoadingBarRouter()]`
`hubLoadingBarInterceptor`	Mantiene la barra abierta mientras viva cada petición HTTP. `finalize` la compensa igual en éxito, en error y en cancelación.	`provideHttpClient(withInterceptors([hubLoadingBarInterceptor]))`
`withoutHubLoadingBar`	Saca una petición de la cuenta. Un sondeo periódico mantendría la barra abierta para siempre, y una barra de progreso que no termina nunca es peor que ninguna.	`this.http.get('/api/heartbeat', { context: withoutHubLoadingBar() })`
`provideHubLoadingBar`	Registra los valores por defecto de la barra para toda la aplicación mediante el token `HUB_LOADING_BAR_CONFIG`: acento, ritmo, periodo de gracia, curva de avance y etiqueta traducida.	`providers: [provideHubLoadingBar({ color: 'primary', delay: 120 })]`