进度条
Progress Bar
别名:进度条加载进度进度指示条百分比进度条上传进度条linear progress显示百分之多少的横条
这是什么
用横条从左到右填充来表示任务完成比例的加载指示，常配百分比或步骤文字。 适用于时长可预测的确定性任务：上传、下载、安装与分步表单。
交互实验室
试一试，再决定怎么用观察进度变化，比较确定进度与不确定进度。
正在加载实验室…
使用时关注什么
- 01已知总量才显示百分比，不伪造处理进度。
- 02进度完成后应切换为明确的成功或失败反馈。
✓ 适用场景
- 时长可预测的确定性任务（上传、导出）
- 分步流程中展示当前进行到第几步
- 时长超过 3 秒、需要传达量感
✕ 不适用场景
- 时长不可知（用 loading-spinner 或骨架屏）
- 极短任务（< 1 秒，直接完成即可）
- 无法给出真实进度（宁可显示不定态，避免假进度）
常见形式
确定进度
Determinate
已知比例按值填充
不定进度
Indeterminate
滑块往复运动，表达进行中但时长未知
带标签
Labeled
附百分比或步骤文字
实现要点
widthtransitionbackground-colorborder-radius@keyframes轨道固定高度（4~8px）圆角，填充条用 width 百分比或 transform scaleX 过渡； 不定态用 keyframes 平移一小块往复循环。务必绑定真实进度事件，无法获知时用不定态而非假进度。 可达性：role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax。
平台 API
<progress>role="progressbar"aria-valuenow代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA | role="progressbar" |
| HTML | <progress> |
| shadcn/ui | Progress |
| MUI | LinearProgress |
横向对比
查看完整对比 →相关概念
用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用， 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌"，不表达进度多少，也不预告还剩多久。
动效替代方案用与真实内容结构一致的灰色占位块表示加载状态，通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位，结构长这样"，而不是让用户盯着空白或转圈等待。
交互模式替代方案数字从 0（或旧值）滚动增长到目标值，让计数过程本身表达"数据在增长"。 常用于数据看板大数字、统计区与里程碑（"10 万用户"）。 数字成为动效的主角，比静态数值更有说服力。
动效搭配使用用户操作后立即按"预计成功"更新界面，真实请求在后台进行，成功则落定， 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感，特别适合点赞、收藏这类高频轻操作。
交互模式搭配使用