Stile

Mixins und Stile

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	Parameter	Beschreibung
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-Variablen

Gestalte jedes Pixel mit 11 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen 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	Standard	Typ	Beschreibung
`--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