Angular Ladeanzeige & Overlay | ng-hub-ui-loading
Angular-Ladekomponente mit Spinner-, Dots-, Bars-, Pulse- und Ring-Indikatoren in den Modi inline, overlay und fullscreen, dazu ein Service für anwendungsweit blockierende Overlays.
Zuletzt aktualisiert 24.08.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
Verwenden Sie ng-hub-ui-loading, wenn ein Abschnitt, ein Container oder die gesamte Anwendung signalisieren muss, dass gearbeitet wird — ohne dass jede View ihren eigenen Spinner und Scrim von Hand baut.
Installieren
npm install ng-hub-ui-loadingSpringen zu
Ideal für
- Routen- und Datenladen
- Overlays beim Absenden von Formularen
- anwendungsweit blockierende Operationen
- gebrandete Splash-Screens
Über loading
ng-hub-ui-loading ist eine Standalone-Angular-Komponente, die einen unbestimmten Ladezustand in drei Modi darstellt: `inline` als Block im Dokumentfluss, `overlay` absolut positioniert über dem übergeordneten Container und `fullscreen` fest am Viewport. Sie bringt fünf reine CSS-Indikatoren mit — spinner, dots, bars, pulse und ring — in drei Größen, dazu eine optionale Nachricht und ein optionales Markenbild mit der Animation `none`, `spin` oder `pulse`. `HubLoadingService` steuert das globale Fullscreen-Overlay programmatisch und zählt gleichzeitige Aufrufer per Referenzzähler, sodass parallele Anfragen einander das Overlay nie entziehen. Jede Farbe, Größe und Dauer ist eine `--hub-loading-*`-Custom-Property, ergänzt um das Sass-Mixin `hub-loading-theme()` für eine durchgängige Umgestaltung; barrierefrei ist die Komponente von Haus aus über `role=status`, `aria-live=polite` und `aria-busy` und respektiert `prefers-reduced-motion`.
Funktionsleitfäden
Inline-Block
`inline` ist der Standardmodus, weil ein noch leerer Bereich den Platz, den sein Inhalt einnehmen wird, bereits reservieren sollte: Der Block nimmt am normalen Dokumentfluss teil, sodass beim Eintreffen des echten Inhalts nichts springt. `message` wird unter dem Indikator gerendert, und alles zwischen den Tags Projizierte erscheint unter der Meldung — der Platz für eine Abbrechen-Aktion oder einen Hinweis, dass der Vorgang länger dauert als üblich. Der Host trägt `role="status"`, `aria-live="polite"` und `aria-busy="true"`, sodass ein Screenreader die Meldung beim Erscheinen aufnimmt, ohne das Vorgelesene zu unterbrechen.
Beispiele:
Grundlagen des Inline-Blocks
Der Inline-Block in seinen drei nützlichen Formen: nur Indikator, Indikator mit Meldung und eine Meldung mit darunter projizierter Abbrechen-Aktion.
The block is announced as role="status" with aria-live="polite", so a screen reader reads the message when it appears without interrupting whatever is being read.
Code
Import:
Template:
Component:
Indikatoren und Akzente
Die Bibliothek bringt fünf reine CSS-Indikatoren mit — `spinner`, `dots`, `bars`, `pulse` und `ring` — und zieht damit weder eine Bilddatei noch eine Icon-Schrift nach. Drei Größenstufen setzen `--hub-loading-size` vor, und das Token bleibt eigenständig überschreibbar, wenn ein Layout eine Größe braucht, die diese Stufen nicht abdecken. `color` ist keine gewöhnliche CSS-Farbe: Der Wert läuft durch `resolveHubAccent()`, das einen bloßen Namen wie `primary` als Design-System-Token liest, der dem Theme folgt, während ein Hex-Wert, ein `oklch()`-Literal oder eine `var(...)`-Referenz unverändert übernommen wird.
Beispiele:
Varianten, Größen und Akzente
Die fünf mitgelieferten Indikatoren, die drei Größenstufen und die drei Formen, die ein Akzent annehmen kann — ein semantischer Name, ein CSS-Farbliteral und eine `var(...)`-Referenz.
Variants
spinnerdotsbarspulseringSizes
size="sm"size="md"size="lg" Each step is a preset for the --hub-loading-size token. Override that token directly when a layout needs a size the three steps do not cover.
Accents
color="primary"color="success"color="danger"color="#7c3aed"color="var(--hub-sys-color-warning)" A bare name resolves to var(--hub-sys-color-<name>) and tracks the active theme. A hex, an oklch() or a var(...) is used verbatim.
Code
Import:
Template:
Component:
Overlay und Fullscreen
`overlay` deckt einen Bereich statt der ganzen Seite ab. Es wird absolut positioniert, also entscheidet der nächste positionierte Vorfahre, was verdeckt wird — gib diesem Container `position: relative`, sonst entkommt das Overlay nach oben zu irgendeinem zufällig positionierten Vorfahren. Diese Eingrenzung hält den Rest des Bildschirms scrollbar und nutzbar. `fullscreen` ist am Viewport fixiert und genau das, was `HubLoadingService` an `document.body` hängt — außerhalb jedes Komponenten-Teilbaums, sodass kein `overflow` und kein Stacking-Kontext eines Vorfahren es abschneiden kann. Beide Modi zeichnen den durchscheinenden Schleier, sofern `backdrop` nicht abgeschaltet wird.
Beispiele:
Container-Overlay
Ein Overlay, das durch `position: relative` der Karte auf eben diese Karte begrenzt bleibt, während der Rest der Seite scrollbar bleibt. Schalte das Backdrop um, um den Unterschied zwischen einer Hintergrundaktualisierung und Arbeit zu sehen, die das Angezeigte entwertet.
Order #4821
3 items · delivered 14 Aug 2026
- Subtotal
- 212.00 €
- Shipping
- 9.90 €
- VAT (21%)
- 26.70 €
- Total
- 248.60 €
Turn the backdrop off to keep the content readable underneath — useful when the work is a background refresh rather than something that invalidates what is on screen.
Code
Import:
Template:
Component:
Fullscreen-Service
`HubLoadingService`, aus TypeScript gesteuert. Zwei überlappende Requests zeigen, warum der Referenzzähler zählt: Das erste `hide()` lässt das Overlay stehen, weil der zweite Aufrufer noch eine Referenz hält, und `update()` schreibt die Meldung mitten im Flug um.
hideAll() after 5 seconds no matter what. Nothing yet.
Code
Import:
Template:
Component:
Branding und Theming
`image` tauscht den eingebauten Indikator gegen eine eigene Marke, animiert mit `none`, `spin` oder `pulse`: `spin` wirkt nur bei einer radialsymmetrischen Marke stimmig, während `pulse` eine Wortmarke aufrecht und lesbar hält. Alles Visuelle steckt in den `--hub-loading-*`-Tokens, deklariert auf `:where(.hub-loading)`, sodass jeder Vorfahre sie setzen kann — Akzent, Größe, Geschwindigkeit, Strichstärke, Abstand, Bildgröße, Textfarbe sowie Tönung und Weichzeichnung des Backdrops. Das Sass-Mixin `hub-loading-theme()` setzt die gesamte Token-Leiter in einem Aufruf, und `provideHubLoading()` legt die Standardwerte für eine ganze Anwendung neu fest, ohne ein Template anzufassen.
Beispiele:
Markenbild
Eine Markenmarke ersetzt den eingebauten Indikator und wird mit allen drei Bildanimationen gezeigt, sodass der Kompromiss zwischen `spin`, `pulse` und `none` sichtbar wird.
imageAnimation="none"imageAnimation="spin"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.
Code
Import:
Template:
Component:
Theming über CSS-Variablen
Live-Theming über die `--hub-loading-*`-Tokens auf einem Wrapper-Element, einschließlich Tönung und Weichzeichnung des Backdrops, die nur in den Modi `overlay` und `fullscreen` überhaupt wirken.
Overlay preview
The backdrop tint and blur only apply in overlay and fullscreen modes. The tint is mixed from --hub-sys-surface-page, so it veils this text with the theme's own surface instead of a fixed colour — drop it to zero and the card stays fully legible underneath.
The same overrides written once, in Sass, are in the CSS tab — that is what hub-loading-theme() is for.
Code
Import:
Template:
Component:
Hauptfunktionen
Letzte Änderungen
Version 22.0.0 - 8/24/26, 12:00 AM
added: Initial release of hub-loading: one component covering the inline block, the container overlay and the fullscreen layer, with role="status", aria-live="polite" and aria-busy set on the host.
added: Five pure-CSS indicators — spinner, dots, bars, pulse and ring — in three size steps, with no image or font dependency.
added: Accent resolution through resolveHubAccent() from ng-hub-ui-utils: a bare name becomes a --hub-sys-color-* token and follows the theme, while a hex, an oklch() or a var(...) is used verbatim.
added: Optional image input with none, spin and pulse animations, replacing the built-in indicator with a brand mark.
added: HubLoadingService for the fullscreen overlay, with a reference counter so concurrent callers cannot unblock the screen out from under each other, plus update() to re-dress the live overlay and hideAll() to force the count to zero. SSR-safe: a no-op without a DOM.
added: provideHubLoading() and the HUB_LOADING_CONFIG token, supplying application-wide defaults to both the component and the service.
added: Theming through the --hub-loading-* token ladder and the hub-loading-theme() Sass mixin, shipped at ng-hub-ui-loading/styles.