原生标签必须设置max和value属性才能显示确定进度，仅value会导致不确定状态；javascript更新应直接赋值element.value并校验范围；样式定制需用浏览器前缀伪元素，但功能受限；需文字、反向、多色或高无障碍时应改用div+aria。
progress 标签的基本结构和必要属性
原生 <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 完全不支持）。
替代方案：什么时候不该用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
