原生<progress>标签必须设置max和value属性才能显示确定进度，仅value会导致不确定状态；JavaScript更新应直接赋值element.value并校验范围；样式定制需用浏览器前缀伪元素，但功能受限；需文字、反向、多色或高无障碍时应改用div+ARIA。
progress 标签的基本结构和必要属性
原生 <progress> 标签不需要额外 JS 就能渲染，但必须设置 max 和 value 才能显示有效进度。只写 <progress></progress> 会呈现为“不确定”状态（浏览器通常显示为动画条），这不是 bug，而是规范行为。
常见错误是漏掉 max：比如 <progress value="75"></progress> 在多数浏览器中不显示数值进度——因为没定义“100% 是多少”。正确写法是：<progress value="75" max="100"></progress>。
注意：value 必须在 0 到 max 之间（含端点），超出范围会被截断或忽略；负值无效。
用 JavaScript 动态更新 value 的安全方式
直接修改 value 属性即可触发 UI 更新，但要注意 DOM 同步时机和数值合法性：
立即学习“前端免费学习笔记（深入）”；
- 用
element.value = newValue（赋值操作）比element.setAttribute('value', newValue)更可靠，后者在某些旧版 Safari 中可能不重绘 - 更新前建议做范围校验：
newValue = Math.min(Math.max(0, newValue), element.max) - 避免高频连续赋值（如 requestAnimationFrame 里每帧都设），浏览器会自动节流，但逻辑上应控制更新节奏
示例：
const bar = document.querySelector('progress');<br>let progress = 0;<br>const timer = setInterval(() => {<br> progress += 2;<br> bar.value = Math.min(progress, bar.max);<br> if (progress >= bar.max) clearInterval(timer);<br>, 100);
样式定制的兼容性要点（特别是 ::-webkit-progress-bar）
progress 默认样式无法用普通 CSS 选择器完全覆盖，必须借助伪元素。但各引擎前缀差异大：
- Chrome / Edge / Safari（WebKit/Blink）：支持
progress::-webkit-progress-bar（背景）、progress::-webkit-progress-value（已填充部分） - Firefox：用
progress::-moz-progress-bar控制填充色，但不能单独样式化背景 - IE：不支持伪元素，只能靠全局 color/background-color 有限影响
关键限制：progress::-webkit-progress-value 不接受 width 或 flex，只能用 background-color、border-radius 等；且该伪元素无法添加阴影或渐变（部分新版 Chrome 支持 background-image，但 Firefox 完全不支持）。
替代方案：什么时候不该用 <progress>
当需要以下功能时，原生 <progress> 就力不从心：
- 显示百分比文字（如 “65%”）——
<progress>本身不渲染文本，需额外<span>同步更新 - 反向进度（从右往左填充）——无标准属性支持，CSS transform 会破坏语义和可访问性
- 多段不同颜色进度（如加载中+缓存命中+网络延迟）——原生只支持单色填充
- 无障碍要求高且需自定义 role/aria-valuetext 的场景——虽然它默认有
role="progressbar"，但 aria 属性需手动同步
这些情况下，用 <div role="progressbar"> + ARIA 属性 + CSS 实现反而更可控、更易测试。
