Angular 加载指示器与遮罩层 | ng-hub-ui-loading

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

内联块

`inline` 之所以是默认模式，是因为一块尚且为空的区域本就该先把内容将要占据的空间留出来：该块参与正常的文档流，因此真实内容到达时不会发生跳动。`message` 渲染在指示器下方，标签之间投影的任何内容再渲染在消息下方——那是放置取消操作，或提示“本次操作比平时更久”的位置。宿主元素带有 `role="status"`、`aria-live="polite"` 与 `aria-busy="true"`，因此屏幕阅读器会在消息出现时读到它，而不会打断正在朗读的内容。

指示器与强调色

库内置五种纯 CSS 指示器——`spinner`、`dots`、`bars`、`pulse` 与 `ring`——因此不会引入任何图片资源或图标字体。三档尺寸预设了 `--hub-loading-size`，而当布局需要这三档之外的尺寸时，该令牌本身仍可单独覆盖。`color` 并非普通的 CSS 颜色：它会经过 `resolveHubAccent()`，把 `primary` 这样的裸名称解析为跟随主题的设计系统令牌，而 hex、`oklch()` 字面量或 `var(...)` 引用则原样使用。

Overlay 与全屏

`overlay` 覆盖的是某一块区域，而不是整个页面。它采用绝对定位，因此由最近的已定位祖先决定被覆盖的范围——请给该容器加上 `position: relative`，否则 overlay 会一路向上逃逸到碰巧被定位的那个祖先。这样限定范围可以让页面其余部分仍能滚动与操作。`fullscreen` 固定于 viewport，正是 `HubLoadingService` 挂载到 `document.body` 上的那一层；它位于所有组件子树之外，因此不会被祖先的 `overflow` 或层叠上下文裁切。除非关闭 `backdrop`，两种模式都会绘制半透明遮罩。

品牌化与主题化

`image` 会用你自己的标识替换内置指示器，并以 `none`、`spin` 或 `pulse` 赋予动效：`spin` 只在径向对称的标识上才好看，而 `pulse` 能让文字标识保持端正易读。所有视觉相关的设定都在 `--hub-loading-*` 令牌里，声明于 `:where(.hub-loading)`，因此任何祖先都能设置它们——强调色、尺寸、速度、线条粗细、间距、图像尺寸、文本颜色，以及遮罩的色调与模糊。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.

页面进度条

`hub-loading-bar` 是那条细带，用来告诉读者页面本身正在路上——就是导航栏下面的那一条。三个决定让它可信。它对调用方计数：一次导航加上页面发出的三个请求就是四个引用，进度条随最后一个结束，而不是第一个。它在画出任何东西之前先等待：在宽限期内完成的工作根本不会出现进度条，因为一条 40 毫秒的路由闪一下进度条，读起来像故障而不像快。它的自动推进随着填充而减速，并且停在终点之前——这里没有人知道真实的百分比，所以只有 `complete()` 可以显示 100%，因为只有 `complete()` 知道那是真的。用 `mode="overlay"` 放进一个已定位的导航栏，或者当导航栏本身固定时，用 `mode="fixed"` 配合 `--hub-loading-bar-offset`。