进度条 Progress

概述

给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。

何时使用

1. 直接展示项目进度时：当用户需要直观的展示一个操作或者项目的进度百分比时，（如：下载/安装/上传等操作或当前项目的占用状态），可以使用进度条。

2. 操作等待时间较长时：当一个操作等待时间较长（超过2s）时，可以使用进度条，可以有效的减少用户在等待过程中产生的焦虑感。

3. 对比进度时：当需要同时对比多个进度时，可以使用进度条。

何时不使用

1. 等待时间过短时：当用户的等待时间小于2s时，建议使用“加载中”组件，而非“进度条”。

2. 操作进度不能量化：当前操作进度不能进行量化时，建议使用“加载中”组件，不应使用“进度条”。

组件构成

1. 当前进度（必有） ：实时展示已完成的进度，颜色与总进程颜色形成强烈对比来展示当前进度情况。

2. 总进度（必有） ：表示需要完成的总进度，建议颜色不带有色彩倾向。

3. 进度描述（建议有） ：对当前进度的简短说明，可以是百分数、图标或者其他自定义字段。

组件类型

组件尺寸

进度条尺寸分为“small”、“large”两个常规尺寸，可以从大小、粗细等参数上作区分。

组件状态

输入框共有4种不同的状态，分别为：进行态、完成态、加载态、报错态。

仪表盘

环形进度条可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度，可以设置 gapDegree 为你想要的值，仪表盘进度条缺口角度，可取值 0 ~ 295。

组件布局

1、标准进度条：进度描述、图标、操作等建议在进度条的右侧

2、环形进度条：进度描述、图标等建议在环形条的中间

文案指南

1、简洁： 数据描述多用百分比形式；

2、直接：直接描述当前数据，减少多余信息；

交互行为

进度条根据交互行为的不同会触发不同的状态，具体状态见【组件状态】模块。

除默认的交互行为外，对于使用场景复杂时，可视情况在进度条上增加简单操作从而提升用户的使用体验，如删除、取消上传、重新上传等。