Angular Loading Spinner & Overlay | ng-hub-ui-loading
Angular loading component with spinner, dots, bars, pulse and ring indicators in inline, overlay and fullscreen modes, plus a service for app-wide blocking overlays.
Styles
Mixins and styles
Override the `--hub-loading-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so a theme that cares about the accent alone does not freeze the other ten tokens at today's defaults. Token-based and self-contained (no Bootstrap dependencies).
hub-loading-theme()
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-loading-theme() | $accent--hub-loading-accent$size--hub-loading-size$thickness--hub-loading-thickness$speed--hub-loading-speed$gap--hub-loading-gap$text-color--hub-loading-text-color$font-size--hub-loading-font-size$backdrop-bg--hub-loading-backdrop-bg$backdrop-blur--hub-loading-backdrop-blur$z-index--hub-loading-z-index$image-size--hub-loading-image-size | One-call theming for `<hub-loading>` |
CSS variables
Theme every pixel with 11 CSS variables. Override them at :root or scope them to a wrapper.
Loading
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-loading-accent | var(--hub-sys-color-primary, #0d6efd) | color | Indicator colour, shared by all five variants |
--hub-loading-size | 2.5rem | length | Indicator diameter; the sm / lg modifiers re-declare it |
--hub-loading-thickness | calc(var(--hub-ref-border-width, 1px) * 3) | string | Stroke weight of the spinner and ring variants |
--hub-loading-speed | 0.9s | string | Period of one animation loop, for every variant |
--hub-loading-gap | var(--hub-sys-gap-2, var(--hub-ref-space-2, 0.5rem)) | length | Space between indicator, message and projected content |
--hub-loading-text-color | var(--hub-sys-text-primary, var(--hub-ref-color-gray-900, #212529)) | color | Message colour |
--hub-loading-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Message font size; the sm / lg modifiers re-declare it |
--hub-loading-backdrop-bg | color-mix(in srgb, var(--hub-sys-surface-page, #ffffff) 72%, transparent) | color | Scrim painted behind the overlay and fullscreen modes |
--hub-loading-backdrop-blur | 2px | length | Blur radius applied to whatever the scrim covers |
--hub-loading-z-index | var(--hub-sys-zindex-modal, 1055) | number | Stacking order of the fullscreen overlay |
--hub-loading-image-size | var(--hub-loading-size) | length | Size of the branding image supplied through image |