可视化方式展示用户操作的当前进度和状态。

适用：

  • 需要为用户显示一个较长操作的当前进度和状态
  • 当一个操作会打断用户当前任务流，耗时超过 2 秒并需要等待完成后才能继续任务流
  • 当需要展示一个操作进程的百分比时

不适用：

  • 无法预估进程的时间，建议使用「加载 Loading」
  • 进程确定在 1 秒内的操作

通用原则

  • 以某个操作的当前进度和状态的“显示”为主
  • 清晰显示进度，准确表达当前状态，可单个使用也可多个组合使用
  • 进度条的颜色用来区分状态类型。
    • 蓝色 为默认色，传达进行中、正常的状态
    • 绿色 用于传达成功的状态
    • 黄色 用于传达提醒与警示的状态
    • 红色 则传达了错误、失败的状态
  • 可以在进度状态异常时，增加帮助文档的Link，或者重新操作的文字button

类型

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

条状

image.png

环形

image.png

构成

image.png

  1. 完整进度
  2. 当前进度
    1. 进度条可搭配准确数值
  3. 结果
    1. 「失败」、「成功」等非默认状态，将具体数值替换为提示性图标

行为

  • 数值随进度增长变动
  • 可在已完成进度条设置 hover 出现 tooltip，展示详细信息
  • 可对已完成进度设置动画