进度条Progress
提示与状态反馈告诉用户任务已经完成到哪里
也常被叫作进度指示器
知道总量时，进度条可以显示百分比或已完成阶段；不知道总量时，只表示任务仍在进行。耗时任务还要说明正在做什么，以及失败、重试或取消后的状态。
容易混淆？这样区分
进度条Progress≠旋转加载指示器Spinner
进度条 Progress 用一条轨道表示任务的整体进展，能计算时还会显示比例；旋转加载指示器 Spinner 通常只用于短暂、局部、无法估算完成度的等待。
进度条Progress≠步骤条Steps
进度条 Progress 表示连续的完成度；步骤条 Steps 会写出每个阶段的名称，让用户知道当前走到了哪一步。
什么时候用
- 文件上传 / 下载：有明确总量，实时更新📎 设计稿.sketch66%
- 多步骤任务：新手引导、资料完善度新手引导3/5
- 额度用量：存储空间、流量套餐存储空间6.6 / 10 GB
- 后台批量任务：导出、同步、批量处理正在导出 1,024 条数据…42%
什么时候不用
- 不知道总量时 → 用不确定进度，同时说明正在做什么加载中，请稍候…
- 一瞬间就完成 → 用 轻提示 Toast 报结果已保存
- 展示多个分类占比时使用图表，单一完成度才使用进度条66%已用存储空间
- 卡住不动也不报错 → 用户以为死机了上传中…12%卡在 12% 十分钟了
组成结构 · Anatomy
上传中…
66%
1进度条本体Progress整条组件，条形是最常见的形态
2轨道Track灰色底槽，代表总量
3填充Fill已完成的部分，实时增长
4状态文案Label正在做什么，例如「上传中…」
5百分比Percent具体数字，缓解等待焦虑
常见变体 · Variants
条形Line
默认形态，上传下载这类横向进度
环形Circle
66%
位置紧凑，或想突出百分比数字时
成功状态Success
上传完成
任务跑完了，定格 100% 报个喜
异常状态Exception
网络中断，上传失败
中途失败，停在出错位置并说明原因
典型使用场景
文件上传进度
📎 首页设计稿.fig2.3 / 3.5 MB
上传中…66%
资料完善度
80%
资料完善度
再上传头像，就能解锁全部功能
去完善 →
存储空间用量
存储空间已用 6.2 / 10 GB
照片占 3.8 GB · 文档占 1.6 GB
批量导出任务
⬇ 批量导出订单数据进行中
正在导出第 3 / 5 个文件，请勿关闭页面