需设value和max才显示进度，否则为不确定态；value必须是0到max间的数字，javascript直接赋值即可更新，css定制需注意浏览器兼容性及伪元素用法。
progress 标签不是装饰性元素，它天生带语义和可访问性支持，但直接写 <progress></progress> 不会动——必须设 value 和 max 才能显示进度。
为什么
常见错误是只写 <progress></progress>，没设属性；或者只设 value 没设 max（此时浏览器按默认 max="1" 解释，value="0.5" 就是 50%，但很多人误传小数）。
-
value必须是数字，且 ≥ 0、≤max，否则进度条渲染为“不确定”状态（部分浏览器显示动画横条） -
max默认为1，但建议显式声明，比如上传文件时用max="100"配合整数value更直观 - 如果
value未设置，进度条呈现“不确定”模式（indeterminate），此时不能用 CSS 伪元素::after模拟填充——得靠 JS 控制或换方案
如何用 JavaScript 动态更新 progress 的值
直接改 value 属性即可触发 UI 更新，无需重绘或事件监听——这是原生优势。
- 用
element.value = 37即可，注意类型：赋值字符串（如"37"）也会被转为数字，但建议统一用数字 - 避免高频赋值（如 requestAnimationFrame 里每帧都设），
<progress></progress>渲染本身轻量，但过度触发仍可能影响低端设备响应 - 更新前建议校验范围：
if (val >= 0 && val ，防止意外进入不确定态
示例：
const bar = document.querySelector('progress');<br>bar.max = 100;<br>bar.value = 0;<br><br>// 模拟加载<br>let i = 0;<br>const timer = setInterval(() => {<br> i += 5;<br> bar.value = Math.min(i, 100);<br> if (i >= 100) clearInterval(timer);<br>}, 200);
立即学习“前端免费学习笔记（深入）”；
CSS 定制 progress 样式时的兼容性坑
Chrome / Edge / Safari 支持 appearance: none + 伪元素，Firefox 从 69+ 才支持 progress::-moz-progress-bar，且不支持 transform 动画。
- 必须先写
appearance: none（加各厂商前缀）才能解锁伪元素控制 - 填充色用
progress::-webkit-progress-value（WebKit）和progress::-moz-progress-bar（Firefox），两者规则要分开写 - 不要对
<progress></progress>直接设height，而是控制伪元素的height；否则 Firefox 下可能失效 - 无障碍提示（如屏幕阅读器读出“已完成 42%”）依赖原生属性，CSS 隐藏后不会消失——这点比手写 div 进度条可靠得多
真正麻烦的不是怎么让它动起来，而是当后端返回的是「已处理 12/387 个文件」这种离散计数时，你得自己算百分比并确保 value 始终落在合法区间内——漏掉这个校验，progress 就会静默退化成不确定态，用户看不到任何反馈。
