API reference

Here's the full contract for loading: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial loading in with 9 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	Where the block sits. `inline` takes part in normal document flow and reserves its own space; `overlay` is positioned absolutely and covers the nearest positioned ancestor; `fullscreen` is fixed to the viewport.
`variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	Which pure-CSS indicator to render. Ignored while `image` is set, since the image replaces the built-in indicator.
`image`	`string \| null`	`null`	URL or data URI rendered instead of the built-in indicator, typically a brand mark. Its box is sized by `--hub-loading-image-size`.
`imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	Motion applied to `image`, and inert while no image is set. `spin` suits a radially symmetric mark, `pulse` keeps a wordmark upright and legible, and `none` leaves it still.
`message`	`string \| null`	`null`	Text rendered below the indicator, and what the live region announces when the block appears. `null` renders no message.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size step feeding `--hub-loading-size`. The token stays overridable on its own when a layout needs a size the three steps do not cover.
`color`	`string \| null`	`null`	Accent for the indicator, normalised by `resolveHubAccent()` into the single `--hub-loading-accent` slot. A bare name such as `primary` resolves to a `--hub-sys-color-*` token and follows the theme; a hex, an `oklch()` literal or a `var(...)` reference is used verbatim. `null` leaves the token's own cascade default in place.
`backdrop`	`boolean`	`true`	Paints the translucent scrim over the covered content. Ignored in `inline` mode, which covers nothing.
`ariaLabel`	`string`	`'Loading'`	Accessible name announced by the host's `role="status"` live region.

Outputs

No outputs documented yet.

Methods

Drive loading from code — 5 methods on its programmatic surface.

Name	Signature	Returns	Description
`HubLoadingService.show`	`show(options?: HubLoadingOptions): void`	`void`	Registers one caller and mounts the fullscreen overlay if it is not up yet. Only the keys actually supplied are applied over the application defaults, so nested calls compose instead of resetting each other.
`HubLoadingService.hide`	`hide(): void`	`void`	Retires one caller and tears the overlay down once none are left. The counter is clamped at zero, so a stray `hide()` cannot turn a later `show()` into a no-op.
`HubLoadingService.hideAll`	`hideAll(): void`	`void`	Drops every pending caller at once and removes the overlay immediately. An escape hatch for error handlers and route changes, not a substitute for balanced `show()` / `hide()` pairs.
`HubLoadingService.update`	`update(options: HubLoadingOptions): void`	`void`	Re-dresses the live overlay — a progress message that changes mid-operation, a variant swap — without touching the reference counter.
`HubLoadingService.isLoading`	`isLoading: Signal<boolean>`	`Signal<boolean> — true while at least one reference is held`	Signal that is true while at least one caller is still waiting. Safe to read during server-side rendering, where the counter runs but no overlay is mounted.

Templates

Make it yours — 2 template slots let you project custom markup.

Name	Description	Example
`Default Content Slot`	Anything projected between the tags renders below the message — a cancel action, a progress note, or a hint that the operation is taking longer than usual.	`<hub-loading message="Importing rows"><button type="button">Cancel</button></hub-loading>`
`provideHubLoading`	Registers application-wide defaults through the `HUB_LOADING_CONFIG` token — brand image, preferred variant, translated label — so `<hub-loading>` and `HubLoadingService` both start from them and individual call sites stay bare.	`providers: [provideHubLoading({ variant: 'ring', size: 'lg' })]`