Angular のローディングスピナーとオーバーレイ | ng-hub-ui-loading

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

インラインブロック

`inline` が既定のモードなのは、まだ空の領域こそ、これから入る内容が占める場所をあらかじめ確保しておくべきだからです。ブロックは通常のドキュメントフローに参加するため、実際の内容が届いてもレイアウトが飛び跳ねません。`message` はインジケーターの下に描画され、タグの間に投影されたものはさらにその下に描画されます。キャンセル操作や「通常より時間がかかっています」といった注記を置く場所です。ホストは `role="status"`、`aria-live="polite"`、`aria-busy="true"` を備えているため、スクリーンリーダーは読み上げ中の内容を中断することなく、表示された時点でメッセージを拾います。

インジケーターとアクセント

ライブラリには純粋な CSS だけで描かれる 5 種類のインジケーター — `spinner`、`dots`、`bars`、`pulse`、`ring` — が同梱されており、画像アセットもアイコンフォントも一切引き込みません。3 段階のサイズが `--hub-loading-size` をプリセットしますが、その 3 段階で足りないレイアウトのために、トークン自体は個別に上書きできるままです。`color` は通常の CSS カラーではありません。値は `resolveHubAccent()` を通り、`primary` のような裸の名前はテーマに追随するデザインシステムのトークンとして解釈され、hex、`oklch()` リテラル、`var(...)` 参照はそのまま使われます。

オーバーレイとフルスクリーン

`overlay` はページ全体ではなく一つの領域を覆います。絶対配置されるため、何が覆われるかを決めるのは最も近い配置済みの祖先です。そのコンテナに `position: relative` を与えてください。さもなければオーバーレイは上方向へ抜け出し、たまたま配置されていた祖先まで届いてしまいます。範囲を限ることで、画面の残りはスクロールでき、操作可能なままになります。`fullscreen` はビューポートに固定され、`HubLoadingService` が `document.body` にマウントするのがこれです。あらゆるコンポーネントのサブツリーの外側なので、祖先の `overflow` やスタッキングコンテキストに切り取られることがありません。どちらのモードも、`backdrop` を切らない限り半透明のスクリムを描きます。

ブランディングとテーマ設定

`image` は組み込みのインジケーターを自前のマークに差し替え、`none`、`spin`、`pulse` で動かします。`spin` が自然に見えるのは放射対称なマークだけで、ワードマークを立てたまま読みやすく保つなら `pulse` です。見た目に関わるものはすべて `--hub-loading-*` トークンにあり、`:where(.hub-loading)` に宣言されているのでどの祖先からでも設定できます — アクセント、サイズ、速度、線の太さ、間隔、画像サイズ、テキスト色、そして backdrop の濃さとぼかしです。Sass ミックスイン `hub-loading-theme()` はこのトークン群を一度の呼び出しでまとめて設定し、`provideHubLoading()` はテンプレートに触れずにアプリケーション全体の既定値を置き換えます。

ブランド画像

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.