<progress>: 进度标签
最后更新：2026-10-13
<progress>进度标签
显示任务的完成进度（如文件上传、加载），由 value/max 控制；若不写 value 则显示“不确定”的动画进度。
| 分类 | 表单 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </progress> 标签 |
| 状态 | 标准 |
📝 语法
<progress value="70" max="100">70%</progress>⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
value | 已完成的数量；省略表示进度不确定。 | |
max | 任务总量，默认 1。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <progress> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： progress 表示不确定的任务进度；若显示固定范围的度量（如评分），用 <meter> 更合适。
❓ 常见问题
Qprogress 不写 value 会怎样？
A不写
value 表示「不确定进度」（indeterminate）——浏览器显示来回滑动或滚动的动画，适合「正在处理但不知道百分比」的场景。写了 value（0~max 之间）就显示确定进度条。Qprogress 的 max 属性默认是多少？
A默认 max 为 1，此时
value='0.5' 表示 50%。改成 max='100' 后 value 就直接写 0-100 的数字，语义更直观。value 超过 max 会被钳制到 max。Qprogress 的样式可以自定义吗？
A可以但要写前缀伪元素：WebKit 用
progress::-webkit-progress-bar 和 progress::-webkit-progress-value，Firefox 用 progress::-moz-progress-bar。跨浏览器统一美化成本较高，复杂需求可考虑 CSS 自绘进度条。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
