API リファレンス

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

インプット

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

名前	型	デフォルト	説明
`hub-loading · mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	ブロックの置かれ方。`inline` は通常のドキュメントフローに参加して自らの領域を確保し、`overlay` は絶対配置されて最も近い配置済みの祖先を覆い、`fullscreen` はビューポートに固定されます。
`hub-loading · variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	どの純 CSS インジケーターを描画するか。`image` が設定されている間は、画像が組み込みインジケーターを置き換えるため無視されます。
`hub-loading · image`	`string \| null`	`null`	組み込みインジケーターの代わりに描画される URL または data URI で、通常はブランドマークです。そのボックスのサイズは `--hub-loading-image-size` で決まります。
`hub-loading · imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	`image` に適用される動き。画像が設定されていない間は効果がありません。`spin` は放射対称なマーク向き、`pulse` はワードマークを立てたまま読みやすく保ち、`none` は静止させます。
`hub-loading · message`	`string \| null`	`null`	インジケーターの下に描画されるテキストで、ブロックが現れたときにライブリージョンが読み上げる内容でもあります。`null` ではメッセージを描画しません。
`hub-loading · size`	`'sm' \| 'md' \| 'lg'`	`'md'`	`--hub-loading-size` に渡されるサイズ段階。3 段階で足りないサイズがレイアウトに必要な場合に備え、トークン自体は個別に上書きできるままです。
`hub-loading · color`	`string \| null`	`null`	インジケーターのアクセント。`resolveHubAccent()` によって唯一のスロット `--hub-loading-accent` へ正規化されます。`primary` のような裸の名前は `--hub-sys-color-*` トークンに解決されテーマに追随し、hex、`oklch()` リテラル、`var(...)` 参照はそのまま使われます。`null` ならトークン自身のカスケード既定値が残ります。
`hub-loading · backdrop`	`boolean`	`true`	覆われた内容の上に半透明のスクリムを描きます。何も覆わない `inline` モードでは無視されます。
`hub-loading · ariaLabel`	`string`	`'Loading'`	ホストの `role="status"` ライブリージョンが読み上げるアクセシブルな名前。
`hub-loading · appendTo`	`string \| null`	`'body'`	`fullscreen` の表示をぶら下げ直す先の要素を指す CSS セレクターです。`null`、または何にも一致しないセレクターなら、テンプレートが宣言した位置のままになります。`inline` と `overlay` は決して動きません。
`hub-loading-bar · mode`	`'inline' \| 'overlay' \| 'fixed'`	`'inline'`	帯の置かれ方。`inline` は通常のフローに参加して自らの行を確保するので、現れてもレイアウトが動きません。`overlay` は絶対配置され、最も近い配置済みの祖先 — `position: relative` を与えたナビゲーションバー — に対して配置されます。`fixed` は `--hub-loading-bar-offset` の位置でビューポートに固定します。
`hub-loading-bar · placement`	`'top' \| 'bottom'`	`'top'`	`overlay` と `fixed` がどちらの端に付くか。`bottom` がナビゲーションバーの下端にバーを吊るします。`inline` はこの値を無視します。
`hub-loading-bar · progress`	`number \| null \| undefined`	`undefined`	バーの制御を引き受けます。バインドしなければ `HubLoadingBarService` に従い、0〜100 の数値は直接バーを動かして `aria-valuenow` として公開され、`null` は非表示にします。
`hub-loading-bar · indeterminate`	`boolean`	`false`	満ちる代わりに断片を往復させます。測れる進捗のない処理向けです。読み上げる値は伏せられますが、これは位置が不明な progressbar を ARIA が示す方法そのものです。
`hub-loading-bar · glow`	`boolean`	`true`	先端の後ろに残る柔らかい光。刻みと刻みのあいだでも動きとして読み取れる要素です。
`hub-loading-bar · color`	`string \| null`	`null`	塗りのアクセント。名前だけなら `--hub-sys-color-*` トークンとして解決されテーマに従い、16 進数・`oklch()`・`var(...)` はそのまま使われます。
`hub-loading-bar · ariaLabel`	`string`	`'Loading'`	ホストの `role="progressbar"` に与えるアクセシブル名。

アウトプット

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

メソッド

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

名前	シグネチャ	戻り値	説明
`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。カウンターだけが動きオーバーレイはマウントされないサーバーサイドレンダリング中でも安全に読み取れます。
`HubLoadingBarService.start`	`start(): void`	`void`	呼び出し元を 1 つ登録します。最初の 1 つがサイクルを始め — 即座にではなく猶予時間のあとで — 残りは数に加わるだけです。
`HubLoadingBarService.complete`	`complete(): void`	`void`	呼び出し元を 1 つ取り下げます。ひとつも残らなければバーは 100 % まで進んで消え、猶予時間が処理全体を飲み込んでいれば見られないまま消えます。
`HubLoadingBarService.completeAll`	`completeAll(): void`	`void`	保留中の呼び出し元をすべて捨て、バーを一度に完了させます。エラーハンドラ用、あるいは `start()` を釣り合わせ損ねた呼び出し元のために。
`HubLoadingBarService.set`	`set(value: number): void`	`void`	猶予時間を待たずにバーを正確な値へ動かして表示します。百分率が実在する処理向けです。値は 0〜100 に丸められますが、自動進行の上限には縛られません。
`HubLoadingBarService.inc`	`inc(amount?: number): void`	`void`	バーを進めて表示します。量を渡さなければ設定された進行カーブが決めます。これが、終わりの見えない待ち時間を到達させずに動かし続ける仕組みです。
`HubLoadingBarService.reset`	`reset(): void`	`void`	すべてを一度に取り消します。完了アニメーションも、保留中の呼び出し元も、画面上のものも残りません。
`HubLoadingBarService.progress`	`progress: Signal<number>`	`Signal<number> — the current fill, 0–100`	現在の塗り、0〜100。サーバーサイドレンダリング中でも安全に読めます。
`HubLoadingBarService.isActive`	`isActive: Signal<boolean>`	`Signal<boolean> — true while at least one caller is waiting`	まだ待っている呼び出し元があるか。バーが姿を見せると決めたかどうかとは関係のない、「ページは読み込み中か」という正直な問いです。
`HubLoadingBarService.isVisible`	`isVisible: Signal<boolean>`	`Signal<boolean> — true only while the bar is painted`	バーが実際に描かれているか。猶予時間の間は false、完了の余韻の間はまだ true です。

テンプレート

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

名前	説明	サンプル
`既定のコンテンツスロット`	タグの間に投影されたものはメッセージの下に描画されます — キャンセル操作、進捗の注記、通常より時間がかかっている旨のヒントなど。	`<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' })]`
`ナビゲーションバーの下のバー`	このバーの名前の由来となる配置。ナビゲーションバーの `position: relative` がオーバーレイをその中に閉じ込め、`placement="bottom"` が下端に吊るします。	`<nav class="navbar position-relative"> <hub-loading-bar mode="overlay" placement="bottom" /> </nav>`
`provideHubLoadingBarRouter`	ナビゲーションが続くあいだだけバーを動かします。ガードが拒否した場合やエラーで終わった場合も含みます — 手配線のバーが取り残されるのは、たいていこの二つです。	`providers: [provideRouter(routes), provideHubLoadingBarRouter()]`
`hubLoadingBarInterceptor`	すべての HTTP リクエストの生存期間だけバーを保ちます。`finalize` は成功でもエラーでもキャンセルでも等しく釣り合いを取ります。	`provideHttpClient(withInterceptors([hubLoadingBarInterceptor]))`
`withoutHubLoadingBar`	リクエストを 1 本、数から外します。タイマーによるポーリングは放っておけばバーを永久に開いたままにしますし、終わらない進捗バーは無いより悪いものです。	`this.http.get('/api/heartbeat', { context: withoutHubLoadingBar() })`
`provideHubLoadingBar`	`HUB_LOADING_BAR_CONFIG` トークンを通じて、アプリ全体のバーの既定値 — アクセント、テンポ、猶予時間、進行カーブ、翻訳されたラベル — を登録します。	`providers: [provideHubLoadingBar({ color: 'primary', delay: 120 })]`