Angular Ladeanzeige & Overlay | ng-hub-ui-loading

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

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.

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.

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.

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.

Markenbild

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.

Seitenfortschrittsleiste

`hub-loading-bar` ist der schmale Streifen, der meldet, dass die Seite selbst unterwegs ist — der unter der Navigationsleiste. Drei Entscheidungen machen ihn glaubwürdig. Er zählt seine Aufrufer: eine Navigation und die drei Anfragen der Seite sind vier Referenzen, und die Leiste endet mit der letzten, nicht mit der ersten. Er wartet, bevor er überhaupt etwas zeichnet: Arbeit, die innerhalb der Karenzzeit fertig wird, zeigt gar keine Leiste, denn eine 40-ms-Route, die kurz einen Fortschrittsbalken aufblitzen lässt, wirkt wie ein Fehler und nicht wie Tempo. Und das Trickle wird langsamer, je voller die Leiste ist, und bleibt vor dem Ende stehen — hier kennt niemand den echten Prozentsatz, also darf nur `complete()` 100 % zeigen, weil nur `complete()` weiß, dass es stimmt. Platzieren Sie sie mit `mode="overlay"` in einer positionierten Navigationsleiste oder mit `mode="fixed"` und `--hub-loading-bar-offset`, wenn die Navigationsleiste selbst fixiert ist.