API リファレンス

loading の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

9 個のインプットで loading を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	ブロックの置かれ方。`inline` は通常のドキュメントフローに参加して自らの領域を確保し、`overlay` は絶対配置されて最も近い配置済みの祖先を覆い、`fullscreen` はビューポートに固定されます。
`variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	どの純 CSS インジケーターを描画するか。`image` が設定されている間は、画像が組み込みインジケーターを置き換えるため無視されます。
`image`	`string \| null`	`null`	組み込みインジケーターの代わりに描画される URL または data URI で、通常はブランドマークです。そのボックスのサイズは `--hub-loading-image-size` で決まります。
`imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	`image` に適用される動き。画像が設定されていない間は効果がありません。`spin` は放射対称なマーク向き、`pulse` はワードマークを立てたまま読みやすく保ち、`none` は静止させます。
`message`	`string \| null`	`null`	インジケーターの下に描画されるテキストで、ブロックが現れたときにライブリージョンが読み上げる内容でもあります。`null` ではメッセージを描画しません。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	`--hub-loading-size` に渡されるサイズ段階。3 段階で足りないサイズがレイアウトに必要な場合に備え、トークン自体は個別に上書きできるままです。
`color`	`string \| null`	`null`	インジケーターのアクセント。`resolveHubAccent()` によって唯一のスロット `--hub-loading-accent` へ正規化されます。`primary` のような裸の名前は `--hub-sys-color-*` トークンに解決されテーマに追随し、hex、`oklch()` リテラル、`var(...)` 参照はそのまま使われます。`null` ならトークン自身のカスケード既定値が残ります。
`backdrop`	`boolean`	`true`	覆われた内容の上に半透明のスクリムを描きます。何も覆わない `inline` モードでは無視されます。
`ariaLabel`	`string`	`'Loading'`	ホストの `role="status"` ライブリージョンが読み上げるアクセシブルな名前。

アウトプット

アウトプットはまだドキュメント化されていません。

メソッド

loading をコードから操作 — プログラム操作のための 5 個のメソッドを備えています。

名前	シグネチャ	戻り値	説明
`HubLoadingService.show`	`show(options?: HubLoadingOptions): void`	`void`	呼び出し元を 1 件登録し、フルスクリーンオーバーレイがまだ出ていなければマウントします。実際に渡されたキーだけがアプリケーション既定値の上に適用されるため、入れ子の呼び出しは互いをリセットせず積み重なります。
`HubLoadingService.hide`	`hide(): void`	`void`	呼び出し元を 1 件解放し、誰も残っていなければオーバーレイを取り外します。カウンターは 0 で止まるため、はぐれた `hide()` が後続の `show()` を無効化することはありません。
`HubLoadingService.hideAll`	`hideAll(): void`	`void`	保留中の呼び出し元をすべて一度に破棄し、オーバーレイを直ちに取り除きます。エラーハンドラーやルート遷移のための非常口であり、`show()` と `hide()` を対で呼ぶことの代わりにはなりません。
`HubLoadingService.update`	`update(options: HubLoadingOptions): void`	`void`	参照カウンターに触れずに、表示中のオーバーレイを整え直します — 処理の途中で変わる進捗メッセージや、バリアントの差し替えなど。
`HubLoadingService.isLoading`	`isLoading: Signal<boolean>`	`Signal<boolean> — true while at least one reference is held`	少なくとも 1 件の呼び出し元が待機している間 true になる signal。カウンターだけが動きオーバーレイはマウントされないサーバーサイドレンダリング中でも安全に読み取れます。

テンプレート

自分好みに — 2 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`既定のコンテンツスロット`	タグの間に投影されたものはメッセージの下に描画されます — キャンセル操作、進捗の注記、通常より時間がかかっている旨のヒントなど。	`<hub-loading message="Importing rows"><button type="button">Cancel</button></hub-loading>`
`provideHubLoading`	`HUB_LOADING_CONFIG` トークンを通じてアプリケーション全体の既定値 — ブランド画像、好みのバリアント、翻訳済みラベル — を登録します。`<hub-loading>` と `HubLoadingService` の双方がそこから始まるため、個々の呼び出し箇所は簡潔なままです。	`providers: [provideHubLoading({ variant: 'ring', size: 'lg' })]`