progress标签不动是因为未同时显式设置value和max属性，导致浏览器进入不确定状态；必须用element.value = 数字方式更新，且需校验0≤value≤max，自定义样式须重置appearance并按浏览器分别处理伪元素。
progress 标签为什么不动？value 和 max 必须同时显式设置
进度条卡在 0% 或显示脉冲动画，几乎全是这个原因：progress 不是“写了就动”的控件，它只按数值渲染状态。只写 <progress value="65"></progress> 而没设 max，浏览器会进入不确定模式——不是 bug，是规范行为。
必须同时提供两个属性才能启用确定进度：
-
max默认为1，但省略易导致小数精度误判（比如后端返回0.68，你却没写max="1"） - 推荐显式声明：用
<progress value="0" max="100"></progress>表示百分比，或<progress value="1956" max="2489"></progress>表示原始计数，避免除法舍入误差 - 如果
value > max，部分浏览器（如 IE）会留白，视觉上“消失”；value 则无效，不渲染填充
JavaScript 更新 value 的正确写法
直接改 setAttribute('value', n) 在 Safari 中可能不触发重绘；用 element.value = n 才是标准、可靠的方式。
常见实操要点：
- 确保类型是数字：
el.value = Number(data.progress)或el.value = +data.progress，字符串"70"会被强制转为70，但"70%"会变成NaN - 防超限：用
Math.min(Math.round(loaded / total * 100), max)，避免网络抖动导致value突然跳到105后又回落 - 不要高频更新：每毫秒都赋值会造成卡顿，可用
requestAnimationFrame节流，或只在变化 ≥ 1% 时才更新value
如何拿到真实进度值？别只盯着 progress 元素
progress 本身不感知网络或文件操作，它只是“显示器”。真正难的是从异步源头拿到准确的 loaded 和 total。
不同场景的数据源差异很大：
- 上传：监听
XMLHttpRequest.upload.onprogress，取event.loaded和event.total - fetch 下载：用
response.body.getReader()分块读取，累加已读字节数；目前 fetch 无原生onprogress - Web Worker：靠
postMessage主动推送进度，例如{ type: 'progress', value: 37 } - Canvas 渲染循环：靠帧计数或完成事件回调，比如每处理完一帧就发一次
progressEl.value++
样式定制必须用伪元素，且各浏览器写法不兼容
progress 元素本身对 background-color、height 等常规 CSS 属性基本无效，必须靠伪元素控制内部结构。
关键配置组合：
- 先清除默认样式：
progress { appearance: none; }（所有现代浏览器都需要） - Chrome/Safari/Edge：
progress::-webkit-progress-bar控轨道，progress::-webkit-progress-value控填充色 - Firefox：
progress::-moz-progress-bar控填充（不支持分设轨道和填充） - IE10+：仅支持
progress[value]属性选择器，无法用伪元素换色，需降级为div模拟 - 过渡动画要加在伪元素上：
progress::-webkit-progress-value { transition: width 0.3s ease; }
最常被忽略的一点：progress 不渲染文本，font-size 对它完全无效；百分比提示必须另加 <span></span> 并用 aria-live="polite" 保证屏幕阅读器可读。
