API 参考

这里是 loading 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 9 个输入项精细调校 loading。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	块所处的位置。`inline` 参与正常文档流并预留自身空间；`overlay` 采用绝对定位并覆盖最近的已定位祖先；`fullscreen` 固定于 viewport。
`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` 的尺寸档位。当布局需要这三档之外的尺寸时，该令牌本身仍可单独覆盖。
`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`	登记一个调用方，若全屏 overlay 尚未挂起则将其挂载。只有实际传入的键才会覆盖到应用默认值之上，因此嵌套调用是叠加而非互相重置。
`HubLoadingService.hide`	`hide(): void`	`void`	注销一个调用方，并在没有调用方剩下时拆除 overlay。计数器在零处被钳制，因此一次多余的 `hide()` 不会让之后的 `show()` 变成空操作。
`HubLoadingService.hideAll`	`hideAll(): void`	`void`	一次性丢弃所有待处理的调用方并立即移除 overlay。这是留给错误处理与路由切换的应急出口，不能取代成对的 `show()` / `hide()`。
`HubLoadingService.update`	`update(options: HubLoadingOptions): void`	`void`	在不触碰引用计数的前提下重新装扮正在显示的 overlay——例如操作中途变化的进度消息，或切换变体。
`HubLoadingService.isLoading`	`isLoading: Signal<boolean>`	`Signal<boolean> — true while at least one reference is held`	只要还有至少一个调用方在等待，该 signal 即为 true。在服务端渲染期间也可安全读取：此时只有计数器在运行，不会挂载 overlay。

模板

打造你自己的样式——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' })]`