进度条
Progress
初级通用进度条（Progress）是用一条逐渐填充的轨道，表示任务已完成多少或仍在进行的界面元素。它让你在上传文件、导出报表等耗时操作中，看出任务没有停住，并在进度可计算时估计还要等多久。
你可能会说：「用户上传文件后，我想让他看到传到哪儿了，而不是一直盯着空白页面等。」
动手看看上传文件的进度条
上传文件
季度销售报表.xlsx文件大小 8.4 MB
已上传 72%
请勿关闭页面
进度类型
填充节奏
切换进度类型，看看同一份文件在两种上传状态下怎么提示等待；调整填充时长或节奏会自动重播，也可以点重播再看一次。
能算出进度时，填充长度对应已完成的 72%。重播只是演示这段填充动画，不代表文件又上传了一次。
要点进度条怎样让等待变得可理解？
- 1
先分清进度能否计算
上传文件时，如果能拿到已传字节数和总字节数，就可以显示百分比。若后台只返回“正在处理”，我们就只能显示持续活动的进度条，别让填充长度暗示一个并不存在的完成比例。
- 2
说清正在处理什么任务
同一页面可能同时有上传和解析。把“上传文件”和“解析内容”写在对应进度条旁边，用户才知道数字指向哪件事；任务完成或失败后，再换成明确的结果信息。
- 3
让进度跟真实状态同步
如果进度条很快走到满格，后台却还在生成结果，用户会以为页面卡住了。我们可以把上传与后续处理分开呈现；处理阶段没有可靠比例时，就改为提示正在处理。
容易混淆的地方
进度条讲的是一个任务推进了多少，步骤条讲的是流程走到哪一步，比如注册流程到了“验证邮箱”。旋转加载指示器只表达“还在忙”，适合没有进度信息的短暂等待；如果要让用户看见上传的完成比例，用进度条更合适。
什么时候用
适合用
- 用户上传视频到网站，前端能获取已上传字节数和文件总大小，可以显示上传百分比。
- 后台批量导出订单，服务端能返回已处理数量和总数量，用户可以据此判断还要等多久。
- AI 工具正在处理一份长文档，暂时算不出完成比例，但需要持续表明任务仍在运行。
不适合用
- 页面只是短暂读取一张卡片的数据，没有可感知的长任务，用骨架屏呈现内容结构更合适。
- 用户正在填写分三步完成的开户表单，想知道自己走到哪一步，用步骤条而不是进度条。
- 点击按钮后只是等待一次很快结束的请求，没有可报告的任务进度，用按钮内的旋转加载指示器即可。
练一练选一个答案，看看解释
你在做报表导出功能：服务端只能告诉前端“正在生成”或“已完成”，不能提供已处理数量。点击导出后可能需要等一会儿，你会怎样设计等待状态？
让 AI 帮你做复制给 AI Agent 直接用
请为报表导出任务设计进度条：如果接口返回已处理数和总数，就显示真实百分比；如果只返回运行状态，就显示不带百分比的持续活动状态。标明“正在生成报表”，完成后提供下载入口，失败后显示错误和重试操作。