progress标签不会自动更新，必须用JavaScript手动设置value属性；常见错误是漏设max属性或value超出[0,max]范围，导致渲染为不确定态或静默失效。
progress 标签本身不自动动起来，必须靠 JavaScript 改 value 才能更新显示。只写静态 HTML 永远卡在初始值，这不是 bug，是设计如此。
为什么 progress.value 赋值后没反应
最常见原因是漏了 max 属性。浏览器看到 <progress value="60"></progress> 会当成“不确定进度”，渲染成动画条或空白——它根本不知道 60 算不算完成。
- 必须同时设置
max：比如<progress value="60" max="100"></progress> -
value超出[0, max]范围时，部分浏览器静默截断，部分直接忽略更新 - 用
element.setAttribute('value', n)在旧版 Safari 中可能不触发重绘；应始终用element.value = n
如何让进度变化看起来平滑而不是跳变
原生 progress 的 value 属性不支持 CSS transition 直接作用，但可以间接实现视觉过渡：
- 给
progress::-webkit-progress-value和progress::-moz-progress-bar加transition: width 0.3s ease - 避免高频赋值：比如在
requestAnimationFrame里每帧都设value，浏览器会节流，但逻辑上建议控制步长（如每次 +1 或 +2） - 若需精确控制动画节奏（比如固定 2 秒从 0 到 100），用
setTimeout或setInterval配合线性插值更可靠
多进度条同步更新时容易踩的坑
多个 <progress></progress> 共享同一套 JS 更新逻辑时，别犯这个错：
立即学习“前端免费学习笔记（深入）”；
- 误用
style.width拉伸进度条：这绕过语义层，破坏无障碍支持，且和value/max脱节 - 用
querySelectorAll('progress')后直接循环赋值，但没校验每个元素的max是否一致——导致有的条跑超、有的卡住 - 没做防抖：按钮连点多次触发多轮定时器，造成进度乱跳甚至负值
- 更新前不检查元素是否还存在于 DOM 中（比如组件已卸载），会报
Cannot set property 'value' of null
真正关键的不是“怎么让它动”，而是“怎么让它动得稳、看得懂、读得清”。max 忘设、value 越界、伪元素样式漏前缀——这些细节一漏，进度条就从提示工具变成迷惑源头。
