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 9 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`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.
`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.
`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.
`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.
`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.
`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.
`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.
`backdrop`	`boolean`	`true`	Zeichnet den durchscheinenden Schleier über dem verdeckten Inhalt. Im Modus `inline` ignoriert, der nichts verdeckt.
`ariaLabel`	`string`	`'Loading'`	Barrierefreier Name, den die Live-Region des Hosts über `role="status"` ankündigt.

Outputs

Noch keine Outputs dokumentiert.

Methoden

Steuere loading aus dem Code heraus — 5 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.

Templates

Mach es zu deinem — 2 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' })]`