progress标签不显示进度，是因为未同时设置合法的value和max属性；必须二者俱全、value为非负数字且≤max，否则浏览器退化为不确定态渲染为空白或动画条纹。
progress 标签不显示进度，大概率是因为没同时写 value 和 max，或者值类型/范围不对——它不是样式问题，是语义和属性校验问题。
为什么 progress 一直空白或跑动画条纹
浏览器只在 value 和 max 同时存在、且 value 是合法数字（≥ 0、≤ max）时，才进入“确定进度”状态。否则一律退化为不确定态（indeterminate），渲染成动画条纹或完全空白。
-
<progress max="100"></progress>→ 没value，不确定态 -
<progress value="-5" max="100"></progress>→value为负，静默丢弃，退化 -
<progress value="105" max="100"></progress>→ 超max，Chrome 显示满格但实际值仍为 105，Firefox 可能不渲染 -
<progress value="50%" max="100"></progress>→value含非数字字符，多数浏览器转失败，尤其 Firefox 更严格
JavaScript 更新 value 必须用 DOM 属性赋值
直接改 HTML 属性或 innerHTML 不会触发 UI 重绘，这是最常踩的坑。
- ✅ 正确：
bar.value = 65（数字类型）、bar.value = Math.round(loaded / total * 100) - ❌ 错误：
bar.setAttribute('value', '65')—— 属性变了，UI 不动 - ❌ 错误：
bar.innerHTML = '<progress value="65"></progress>'—— 替换节点，丢失引用和事件绑定 - ⚠️ 注意：从
<input type="number">读值后必须转数字，bar.value = +input.value或bar.value = Number(input.value)，否则字符串失效
CSS 自定义填充色必须用伪元素 + appearance: none
直接写 progress { background: red } 只影响外框，对内部填充色完全无效。
- 必须先重置默认外观：
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - Chrome/Safari：
progress::-webkit-progress-bar控轨道，progress::-webkit-progress-value控填充 - Firefox：
progress::-moz-progress-bar控整个已填充区域（无独立轨道伪元素） - 别设
color或font-size——<progress></progress>不渲染任何文本内容 - 想加平滑过渡？WebKit 支持
transition: width 0.3s ease在::-webkit-progress-value上；Firefox 不支持该动画
无障碍支持不能只靠默认行为
原生 <progress></progress> 带 role="progressbar"，但屏幕阅读器是否读出“65%”，取决于你有没有同步上下文。
- 必须配
aria-label或aria-labelledby，例如：<progress value="65" max="100" aria-label="文件上传进度"></progress> - JS 动态更新
value后，部分读屏器（如旧版 NVDA）不会自动抓取新值，稳妥做法是手动同步：bar.setAttribute('aria-valuenow', '65') - 如果
max不是 100（比如max="24"），记得也同步aria-valuemax - 不要把提示文字塞进标签体：
<progress>65%</progress>中的 “65%” 是 fallback 内容，仅在浏览器完全不支持时才显示，且默认不可见、不被读屏器识别
真正难的不是写出来，而是每次更新前都得检查三件事：值是不是数字、有没有越界、伪元素有没有按引擎分写。漏掉任意一个，进度条就可能静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
