Loading Indicator 是一个面向开发者的 UX 模式，用于向用户展示内容正在加载。
用途
该模式帮助团队以一种可靠的方式展示“工作正在进行中”，同时不夸大对时长或完成情况的确定性。它最适合用于按钮提交与保存等场景。与相邻模式相比，该模式应在不隐藏用户继续操作所需的状态、规则或恢复路径的前提下减少摩擦。
适用场景
- 按钮提交与保存
- 列表或面板数据获取
- 时长未知的后台同步与上传
应避免的场景
- 当事件过于微小、不值得打断任务时，应使用更安静的状态。
- 对于用户之后必须能够重新查看的事件，避免使用瞬时反馈。
- 不要在没有层级规则的情况下，在多个渠道重复同一条消息。
实现流程
- 在复制示例之前，确认该模式与问题和约束相匹配。
- 从 references/pattern.md 中的结构与示例入手，然后选择最小可行的变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互方面的护栏。
- 使用测试指南验证键盘、屏幕阅读器、响应式以及失败场景下的行为。
无障碍护栏
键盘交互
- 验证仅使用键盘即可完成加载指示器的操作。
- 当该模式打开、更新或显示额外 UI 时，保持焦点顺序合乎逻辑。
- 保持可见的焦点状态，且在高倍缩放时仍然可读。
屏幕阅读器支持
- 优先使用语义元素，仅在语义本身不足时才添加 ARIA。
- 在正确的位置、以正确的礼貌级别播报错误、加载或完成等状态变化。
- 在有用时，通过 aria-describedby 或结构化标题连接标签、提示和状态文本。
视觉无障碍
- 不要仅依靠颜色来传达严重程度、完成情况或选中状态。
常见错误
过度提示一切
问题：当每个状态都使用强烈的颜色、动效和声音时，人们会不再关注。
如何修复：建立严重程度阶梯，将最强的处理保留给真正需要打断用户的状态。
时机与任务不匹配
问题：短任务配上沉重的加载 UI 会显得迟缓，而长任务没有任何进度指引则会让人感觉被遗弃。
如何修复：根据等待时长选择尽可能轻量的反馈，并让该模式如实反映已知信息的多少。
跳过播报策略
问题：当 live-region 行为不一致或缺失时，屏幕阅读器用户会错过瞬时变化。
如何修复：定义每个状态如何被播报，并使用真实的辅助技术测试 polite 与 assertive 更新。
相关模式
- https://uxpatterns.dev/patterns/user-feedback/notification
- https://uxpatterns.dev/patterns/user-feedback/progress-indicator
- https://uxpatterns.dev/patterns/user-feedback/skeleton
完整的实现细节、示例和测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/user-feedback/loading-indicator