progress 标签需显式设置 value 才显示确定进度；value 必须为 min 和 max 间的有效数字，推荐直接赋值 number 类型并同步更新 aria 属性与辅助文本以保障可访问性。
progress 标签的 value 属性必须显式设置才可见
浏览器默认渲染 <progress></progress> 时，若不设 value，它会显示为“不确定进度”（通常是一段流动动画），而不是空白——这点常被误认为“没生效”。只有当 value 被设为一个介于 min 和 max 之间的数字时，进度条才真正“有值可画”。
常见错误是只写 <progress max="100"></progress>，却不设 value；或者用 JS 修改了 value 但忘了触发重绘（其实不用手动触发，DOM 更新即生效）。
-
min默认是0，max默认是100，但建议显式声明，避免隐式转换歧义 - 设
value为NaN、负数或超max的值，浏览器会忽略该赋值，进度条保持原状 - 直接修改
innerHTML或文本内容对<progress></progress>无效，它不渲染子文本
用 JavaScript 动态更新 value 的正确写法
更新 value 最稳妥的方式是直接操作 DOM 元素的 value 属性（不是 setAttribute），因为后者可能触发类型转换问题（比如传字符串 "50" 会被转成 0）。
const prog = document.querySelector('progress');
// ✅ 正确：赋值为 number
prog.value = 65;
// ❌ 错误：setAttribute 传字符串，某些浏览器解析异常
prog.setAttribute('value', '65');
// ✅ 安全的批量更新（如配合 fetch 进度）
let loaded = 0;
const total = 1024000;
const timer = setInterval(() => {
loaded += 12800;
if (loaded >= total) {
clearInterval(timer);
loaded = total;
}
prog.value = Math.min(loaded, total); // 防越界
}, 100);
自定义样式时注意伪元素兼容性差异
Chrome / Edge 支持 ::-webkit-progress-bar 和 ::-webkit-progress-value，Firefox 用 ::progress-bar 和 ::progress-value（实际支持有限），Safari 仅部分支持 WebKit 前缀。纯 CSS 自定义在 Firefox 中基本不可控。
立即学习“前端免费学习笔记（深入）”；
关键限制：无法用 CSS 改变进度条“填充方向”（比如从右向左），也无法实现圆角渐变填充——这些必须靠 SVG 或 Canvas 模拟。
- 修改颜色推荐用
accent-color（现代 Chromium 内核已支持），比写一堆伪元素更简洁 -
accent-color: #3b82f6;可同时影响<progress></progress>和<input type="range"> - 若需 IE 兼容或复杂动效，应降级为
<div> + <code>width控制，而非强依赖<progress></progress>与 ARIA 配合提升可访问性不能少
单纯用
<progress></progress>不自动包含语义化描述，屏幕阅读器可能只读“进度条”，不报百分比。必须配合aria-valuenow、aria-valuemin、aria-valuemax，且实时同步更新。<progress id="upload-progress" max="100" value="0"></progress> <span class="sr-only" aria-live="polite"> 已上传 <span id="progress-text">0%</span> </span> <script> const prog = document.getElementById('upload-progress'); const text = document.getElementById('progress-text'); function updateProgress(v) { prog.value = v; prog.setAttribute('aria-valuenow', v); text.textContent = v + '%'; } </script>注意
aria-live="polite"让变化被朗读，而sr-only类确保视觉隐藏但无障碍可读。漏掉任一属性，都可能导致残障用户无法感知进度变化。progress 标签本身轻量，但真正难的是在各种异步场景中保持 value、ARIA 属性、辅助文本三者严格同步——任何一处延迟或错位，都会破坏可访问性体验。
