API-Referenz

Hier ist der vollständige Vertrag für loading: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle loading mit 17 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`hub-loading · mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	Wo der Block sitzt. `inline` nimmt am normalen Dokumentfluss teil und reserviert eigenen Platz; `overlay` wird absolut positioniert und deckt den nächsten positionierten Vorfahren ab; `fullscreen` ist am Viewport fixiert.
`hub-loading · variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	Welcher reine CSS-Indikator gerendert wird. Wird ignoriert, solange `image` gesetzt ist, da das Bild den eingebauten Indikator ersetzt.
`hub-loading · image`	`string \| null`	`null`	URL oder Data-URI, die statt des eingebauten Indikators gerendert wird — typischerweise eine Markenmarke. Ihre Box wird über `--hub-loading-image-size` dimensioniert.
`hub-loading · imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	Bewegung für `image`; ohne gesetztes Bild wirkungslos. `spin` passt zu einer radialsymmetrischen Marke, `pulse` hält eine Wortmarke aufrecht und lesbar, `none` lässt sie still.
`hub-loading · message`	`string \| null`	`null`	Text unter dem Indikator und zugleich das, was die Live-Region beim Erscheinen des Blocks ankündigt. `null` rendert keine Meldung.
`hub-loading · size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Größenstufe, die `--hub-loading-size` speist. Das Token bleibt eigenständig überschreibbar, wenn ein Layout eine Größe braucht, die die drei Stufen nicht abdecken.
`hub-loading · color`	`string \| null`	`null`	Akzent des Indikators, von `resolveHubAccent()` in den einzigen Slot `--hub-loading-accent` normalisiert. Ein bloßer Name wie `primary` löst zu einem `--hub-sys-color-*`-Token auf und folgt dem Theme; ein Hex-Wert, ein `oklch()`-Literal oder eine `var(...)`-Referenz wird unverändert übernommen. `null` belässt den Kaskaden-Standard des Tokens.
`hub-loading · backdrop`	`boolean`	`true`	Zeichnet den durchscheinenden Schleier über dem verdeckten Inhalt. Im Modus `inline` ignoriert, der nichts verdeckt.
`hub-loading · ariaLabel`	`string`	`'Loading'`	Barrierefreier Name, den die Live-Region des Hosts über `role="status"` ankündigt.
`hub-loading · appendTo`	`string \| null`	`'body'`	CSS-Selektor des Elements, unter das ein `fullscreen`-Indikator verschoben wird; bei `null` oder einem Selektor, der nichts trifft, bleibt er dort, wo die Vorlage ihn deklariert. `inline` und `overlay` werden nie verschoben.
`hub-loading-bar · mode`	`'inline' \| 'overlay' \| 'fixed'`	`'inline'`	Wo der Streifen sitzt. `inline` nimmt am normalen Fluss teil und reserviert seine eigene Zeile, sodass beim Erscheinen nichts springt; `overlay` wird absolut am nächsten positionierten Vorfahren ausgerichtet — der Navigationsleiste, der Sie `position: relative` gegeben haben; `fixed` heftet ihn an den Viewport bei `--hub-loading-bar-offset`.
`hub-loading-bar · placement`	`'top' \| 'bottom'`	`'top'`	An welche Kante sich die Modi `overlay` und `fixed` heften. `bottom` hängt die Leiste an die Unterseite einer Navigationsleiste; `inline` ignoriert den Wert.
`hub-loading-bar · progress`	`number \| null \| undefined`	`undefined`	Übernimmt die Leiste. Ungebunden folgt sie `HubLoadingBarService`; eine Zahl von 0 bis 100 steuert sie direkt und wird als `aria-valuenow` veröffentlicht; `null` blendet sie aus.
`hub-loading-bar · indeterminate`	`boolean`	`false`	Lässt ein Fragment hin- und herwandern, statt zu füllen — für Arbeit ohne messbaren Fortschritt. Der angesagte Wert wird zurückgehalten, und genau so kennzeichnet ARIA eine Fortschrittsanzeige unbekannter Position.
`hub-loading-bar · glow`	`boolean`	`true`	Weiches Leuchten hinter der Vorderkante — das Detail, das auch zwischen zwei Trickle-Schritten noch als Bewegung gelesen wird.
`hub-loading-bar · color`	`string \| null`	`null`	Akzent der Füllung. Ein bloßer Name wird zu einem `--hub-sys-color-*`-Token aufgelöst und folgt dem Theme; ein Hex-Wert, ein `oklch()` oder ein `var(...)` wird wörtlich übernommen.
`hub-loading-bar · ariaLabel`	`string`	`'Loading'`	Zugänglicher Name für das `role="progressbar"` des Hosts.

Outputs

Noch keine Outputs dokumentiert.

Methoden

Steuere loading aus dem Code heraus — 14 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`HubLoadingService.show`	`show(options?: HubLoadingOptions): void`	`void`	Registriert einen Aufrufer und hängt das Fullscreen-Overlay ein, falls es noch nicht steht. Nur die tatsächlich übergebenen Schlüssel werden über die Anwendungsstandards gelegt, sodass verschachtelte Aufrufe sich ergänzen statt einander zurückzusetzen.
`HubLoadingService.hide`	`hide(): void`	`void`	Entlässt einen Aufrufer und baut das Overlay ab, sobald keiner mehr wartet. Der Zähler wird bei null gekappt, sodass ein verirrtes `hide()` ein späteres `show()` nicht wirkungslos machen kann.
`HubLoadingService.hideAll`	`hideAll(): void`	`void`	Verwirft alle offenen Aufrufer auf einmal und entfernt das Overlay sofort. Ein Notausstieg für Fehlerbehandlung und Routenwechsel, kein Ersatz für ausgeglichene `show()`/`hide()`-Paare.
`HubLoadingService.update`	`update(options: HubLoadingOptions): void`	`void`	Kleidet das laufende Overlay neu ein — eine Fortschrittsmeldung, die sich mitten im Vorgang ändert, ein Variantenwechsel — ohne den Referenzzähler anzutasten.
`HubLoadingService.isLoading`	`isLoading: Signal<boolean>`	`Signal<boolean> — true while at least one reference is held`	Signal, das true ist, solange mindestens ein Aufrufer wartet. Auch beim Server-Side-Rendering sicher lesbar, wo der Zähler läuft, aber kein Overlay eingehängt wird.
`HubLoadingBarService.start`	`start(): void`	`void`	Registriert einen Aufrufer. Der erste startet einen Zyklus — nach der Karenzzeit, nicht sofort — die übrigen erhöhen nur den Zähler.
`HubLoadingBarService.complete`	`complete(): void`	`void`	Zieht einen Aufrufer zurück. Ist keiner mehr übrig, läuft die Leiste auf 100 % und blendet aus — oder verschwindet ungesehen, wenn die Karenzzeit den ganzen Vorgang geschluckt hat.
`HubLoadingBarService.completeAll`	`completeAll(): void`	`void`	Verwirft alle offenen Aufrufer und schließt die Leiste sofort ab. Für einen Fehler-Handler oder einen Aufrufer, der sein `start()` nie ausgeglichen hat.
`HubLoadingBarService.set`	`set(value: number): void`	`void`	Setzt die Leiste auf einen exakten Wert und zeigt sie sofort, ohne die Karenzzeit abzuwarten. Für Arbeit mit echtem Prozentsatz; der Wert wird auf 0–100 begrenzt, aber nicht auf die Trickle-Obergrenze.
`HubLoadingBarService.inc`	`inc(amount?: number): void`	`void`	Bewegt die Leiste weiter und zeigt sie. Ohne Betrag entscheidet die konfigurierte Trickle-Kurve — das ist es, was ein unbekanntes Warten in Bewegung hält, ohne je anzukommen.
`HubLoadingBarService.reset`	`reset(): void`	`void`	Bricht alles auf einmal ab — keine Abschlussanimation, keine offenen Aufrufer, nichts auf dem Bildschirm.
`HubLoadingBarService.progress`	`progress: Signal<number>`	`Signal<number> — the current fill, 0–100`	Aktuelle Füllung, 0–100. Auch beim serverseitigen Rendern gefahrlos lesbar.
`HubLoadingBarService.isActive`	`isActive: Signal<boolean>`	`Signal<boolean> — true while at least one caller is waiting`	Ob noch ein Aufrufer wartet — die ehrliche Frage „lädt die Seite?“, unabhängig davon, ob die Leiste sich schon zeigt.
`HubLoadingBarService.isVisible`	`isVisible: Signal<boolean>`	`Signal<boolean> — true only while the bar is painted`	Ob die Leiste tatsächlich gezeichnet wird. Während der Karenzzeit falsch, im Abschluss-Nachlauf noch wahr.

Templates

Mach es zu deinem — 7 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`Standard-Inhaltsslot`	Alles zwischen den Tags Projizierte wird unter der Meldung gerendert — eine Abbrechen-Aktion, eine Fortschrittsnotiz oder ein Hinweis, dass der Vorgang länger dauert als üblich.	`<hub-loading message="Importing rows"><button type="button">Cancel</button></hub-loading>`
`provideHubLoading`	Registriert anwendungsweite Standardwerte über das Token `HUB_LOADING_CONFIG` — Markenbild, bevorzugte Variante, übersetztes Label —, sodass `<hub-loading>` und `HubLoadingService` beide davon ausgehen und einzelne Aufrufstellen schlank bleiben.	`providers: [provideHubLoading({ variant: 'ring', size: 'lg' })]`
`Leiste unter der Navigationsleiste`	Die Platzierung, nach der die Leiste benannt ist. `position: relative` auf der Navigationsleiste ist das, was das Overlay auf sie begrenzt, und `placement="bottom"` hängt es an die Unterkante.	`<nav class="navbar position-relative"> <hub-loading-bar mode="overlay" placement="bottom" /> </nav>`
`provideHubLoadingBarRouter`	Lässt die Leiste genau so lange laufen wie eine Navigation — auch eine, die ein Guard ablehnt oder ein Fehler beendet: die beiden Fälle, in denen eine handverdrahtete Leiste sonst hängen bleibt.	`providers: [provideRouter(routes), provideHubLoadingBarRouter()]`
`hubLoadingBarInterceptor`	Hält die Leiste für die Lebensdauer jeder HTTP-Anfrage offen. `finalize` gleicht sie bei Erfolg, Fehler und Abbruch gleichermaßen aus.	`provideHttpClient(withInterceptors([hubLoadingBarInterceptor]))`
`withoutHubLoadingBar`	Nimmt eine Anfrage aus dem Zähler heraus. Ein Polling auf einem Timer würde die Leiste sonst für immer offen halten, und ein Fortschrittsbalken, der nie fertig wird, ist schlimmer als keiner.	`this.http.get('/api/heartbeat', { context: withoutHubLoadingBar() })`
`provideHubLoadingBar`	Registriert anwendungsweite Vorgaben der Leiste über das Token `HUB_LOADING_BAR_CONFIG` — Akzent, Tempo, Karenzzeit, Trickle-Kurve, übersetztes Label.	`providers: [provideHubLoadingBar({ color: 'primary', delay: 120 })]`