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