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