适用：

• 需要为用户显示一个较长操作的当前进度和状态

• 当一个操作会打断用户当前任务流，耗时超过 2 秒并需要等待完成后才能继续任务流

• 当需要展示一个操作进程的百分比时

不适用：

• 无法预估进程的时间，建议使用「加载 Loading」

• 进程确定在 1 秒内的操作

通用原则

• 以某个操作的当前进度和状态的“显示”为主

• 清晰显示进度，准确表达当前状态，可单个使用也可多个组合使用

• 进度条的颜色用来区分状态类型。

  • 品牌色 为默认色，传达进行中、正常的状态

  • 绿色 用于传达成功的状态

  • 琥珀色 用于传达提醒与警示的状态

  • 红色 则传达了错误、失败的状态

• 可以在进度状态异常时，增加帮助文档的Link，或者重新操作的文字button

类型

类型	何时使用
条状	设计师根据实际情况选择
环型	设计师根据实际情况选择

条状

环形

构成

1. 完整进度

2. 当前进度

   1. 进度条可搭配准确数值

3. 结果

   1. 进度条可搭配准确数值同时显示结果

   2. 如果出现「失败」、「告警」、「成功」等非默认状态，可以将具体数值替换为提示性图标

行为

• 数值随进度增长变动

• 可在已完成进度条设置 hover 出现 tooltip，展示详细信息

• 可对已完成进度设置动画

实践案例