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-bar-*` 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 twelve tokens at today's defaults. Token-based and self-contained (no Bootstrap dependencies).
hub-loading-bar-theme()
hub-loading-theme()
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-loading-bar-theme() | $accent--hub-loading-bar-accent$height--hub-loading-bar-height$track-bg--hub-loading-bar-track-bg$radius--hub-loading-bar-radius$speed--hub-loading-bar-speed$fade--hub-loading-bar-fade$easing--hub-loading-bar-easing$glow-color--hub-loading-bar-glow-color$glow-blur--hub-loading-bar-glow-blur$glow-spread--hub-loading-bar-glow-spread$indeterminate-speed--hub-loading-bar-indeterminate-speed$offset--hub-loading-bar-offset$z-index--hub-loading-bar-z-index | One-call theming for `<hub-loading-bar>` |
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 24 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 |
Loading bar
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-bar-accent | var(--hub-sys-color-primary, #0d6efd) | color | Fill colour of the bar |
--hub-loading-bar-height | 3px | length | Thickness of the strip |
--hub-loading-bar-track-bg | transparent | color | Unfilled track; transparent so an idle bar draws no permanent line under the navbar |
--hub-loading-bar-radius | 0 | length | Corner radius of the strip and its fill |
--hub-loading-bar-speed | 200ms | string | How long the fill takes to catch up with a new value |
--hub-loading-bar-fade | 300ms | string | Fade in and out of the whole strip |
--hub-loading-bar-easing | linear | transition | Easing of the fill; linear reads as steady progress rather than as a flourish |
--hub-loading-bar-glow-color | var(--hub-loading-bar-accent) | color | Colour of the glow trailing the leading edge |
--hub-loading-bar-glow-blur | 10px | length | Blur radius of that glow |
--hub-loading-bar-glow-spread | 1px | length | Spread radius of that glow |
--hub-loading-bar-indeterminate-speed | 1.6s | string | Period of one indeterminate sweep; calmed under prefers-reduced-motion |
--hub-loading-bar-offset | 0px | length | Distance from the edge the overlay and fixed modes attach to |
--hub-loading-bar-z-index | var(--hub-sys-zindex-sticky, 1020) | number | Stacking order of the positioned modes, at chrome level |