Progress Bar
进度条
WebMobileDesktop上手难度: 容易
一条横线，随着任务完成一点点填满，让你知道还要等多久。
Live Demo
真的可以点已上传 0.0 MB / 8 MB0%
你刚才看到的这个：App 更新时顶部的细长进度条、下载文件时底部的百分比条、上传照片时每张图下面的小细条。
它到底是什么
Progress Bar 的关键是有没有确定的总量。有总量就显示百分比；没有总量（不知道要多久）就显示不确定态（来回滑动的短条），不要假装有进度。
进度条progress bar进度指示器loading bar百分比条
Anatomy · 它由什么组成
Track轨道
4px 高，浅灰底
Fill已填充
主色，宽度 = 百分比
Label百分比
可选，紧邻显示
Indeterminate不确定态
短条来回滑动
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 知道总工作量，能给出百分比 | 用 |
| 任务耗时较长（上传、下载、安装） | 用 |
| 需要显示「第几步 / 共几步」的量化感 | 用 |
| 完全不知道要多久 | 视情况 |
| 操作 0.3 秒就完成 | 不用 |
进度条走到 99% 停住是最糟糕的体验——如果卡在 99%，应该改成不确定态或显示原因。
不要在不确定进度时显示假的百分比（比如匀速走到 90% 再等），用户能感觉到被欺骗。
Similar Patterns
别搞混一句话区分：一条横线，随着任务完成一点点填满，让你知道还要等多久。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
上传时显示进度条：已知总大小所以显示真实百分比和「已上传 3.2MB / 8MB」；上传完成后变绿色打勾，失败变红色并显示重试。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加载的时候加个进度条。
改成这样说
加载时显示 Progress Bar：已知总量时显示真实百分比 + 「已上传 3.2MB / 8MB」文案，完成变绿勾、失败变红并给「重试」，总量未知时改用不确定态短条循环而不是假进度。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。