Angular Loading Spinner & Overlay | ng-hub-ui-loading

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Inline Block

`inline` is the default mode because a region that is still empty should already reserve the space its content will take: the block joins normal document flow, so nothing jumps when the real content arrives. `message` renders under the indicator, and anything projected between the tags renders under the message — the place for a cancel action or a note that the operation is taking longer than usual. The host carries `role="status"`, `aria-live="polite"` and `aria-busy="true"`, so a screen reader picks the message up as it appears without interrupting whatever it is already reading.

Indicators And Accents

Five pure-CSS indicators ship with the library — `spinner`, `dots`, `bars`, `pulse` and `ring` — so it pulls in no image asset and no icon font. Three size steps preset `--hub-loading-size`, and the token stays overridable on its own for a layout the steps do not cover. `color` is not an ordinary CSS colour: it goes through `resolveHubAccent()`, which reads a bare name such as `primary` as a design-system token that follows the theme, while a hex, an `oklch()` literal or a `var(...)` reference is used verbatim.

Overlay And Fullscreen

`overlay` covers one region instead of the page. It is positioned absolutely, so the nearest positioned ancestor decides what gets covered — give that container `position: relative`, or the overlay escapes upwards to whatever ancestor happens to be positioned. Scoping it that way keeps the rest of the screen scrollable and usable. `fullscreen` is fixed to the viewport and is what `HubLoadingService` mounts on `document.body`, outside every component subtree, so no ancestor's `overflow` or stacking context can clip it. Both modes paint the translucent scrim unless `backdrop` is turned off.

Branding And Theming

`image` swaps the built-in indicator for a mark of your own, animated with `none`, `spin` or `pulse`: `spin` only reads well on a radially symmetric mark, while `pulse` keeps a wordmark upright and legible. Everything visual lives in the `--hub-loading-*` tokens, declared on `:where(.hub-loading)` so any ancestor can set them — accent, size, speed, stroke thickness, gap, image size, text colour, and the backdrop tint and blur. The `hub-loading-theme()` Sass mixin sets the whole ladder in one call, and `provideHubLoading()` re-bases the defaults for an entire application without touching a template.

Branded Image

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.