Angular のローディングスピナーとオーバーレイ | ng-hub-ui-loading
spinner・dots・bars・pulse・ring のインジケーターを inline・overlay・fullscreen の 3 モードで描画する Angular のローディングコンポーネント。アプリ全体を覆うオーバーレイ用のサービスも同梱。
スタイル
ミックスインとスタイル
Override the `--hub-loading-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so a theme that cares about the accent alone does not freeze the other ten tokens at today's defaults. Token-based and self-contained (no Bootstrap dependencies).
hub-loading-theme()
| ミックスイン | パラメータ | 説明 |
|---|---|---|
| Theming | ||
hub-loading-theme() | $accent--hub-loading-accent$size--hub-loading-size$thickness--hub-loading-thickness$speed--hub-loading-speed$gap--hub-loading-gap$text-color--hub-loading-text-color$font-size--hub-loading-font-size$backdrop-bg--hub-loading-backdrop-bg$backdrop-blur--hub-loading-backdrop-blur$z-index--hub-loading-z-index$image-size--hub-loading-image-size | One-call theming for `<hub-loading>` |
CSS 変数
11 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
Loading
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-loading-accent | var(--hub-sys-color-primary, #0d6efd) | color | Indicator colour, shared by all five variants |
--hub-loading-size | 2.5rem | length | Indicator diameter; the sm / lg modifiers re-declare it |
--hub-loading-thickness | calc(var(--hub-ref-border-width, 1px) * 3) | string | Stroke weight of the spinner and ring variants |
--hub-loading-speed | 0.9s | string | Period of one animation loop, for every variant |
--hub-loading-gap | var(--hub-sys-gap-2, var(--hub-ref-space-2, 0.5rem)) | length | Space between indicator, message and projected content |
--hub-loading-text-color | var(--hub-sys-text-primary, var(--hub-ref-color-gray-900, #212529)) | color | Message colour |
--hub-loading-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Message font size; the sm / lg modifiers re-declare it |
--hub-loading-backdrop-bg | color-mix(in srgb, var(--hub-sys-surface-page, #ffffff) 72%, transparent) | color | Scrim painted behind the overlay and fullscreen modes |
--hub-loading-backdrop-blur | 2px | length | Blur radius applied to whatever the scrim covers |
--hub-loading-z-index | var(--hub-sys-zindex-modal, 1055) | number | Stacking order of the fullscreen overlay |
--hub-loading-image-size | var(--hub-loading-size) | length | Size of the branding image supplied through image |