必须同时设置 value 和 max 才能显示确定进度；progress 非自动动画元素，需 js 动态更新 value；样式定制依赖伪元素且各浏览器写法不同；ie 兼容需降级方案。
必须同时设置 value 和 max 才能显示确定进度
progress 标签不是“写了就动”的动画元素，它只负责按数值渲染状态。如果只写 <progress></progress> 或仅设 value="70" 而不设 max，浏览器会进入“不确定进度”模式——多数表现为条纹脉冲动画，不代表 70%，只是提示“任务在跑，但不知道还剩多少”。
推荐始终显式声明两个属性：
• <progress value="0" max="100"></progress>（适用于百分比场景）
• <progress value="1250" max="5000"></progress>（适用于文件字节类真实量纲）
max 默认为 1，但省略易引发小数精度误判（如后端返回 value="0.68"），显式写上更可控。
用 JavaScript 动态更新 value 是唯一可靠方式
进度条不会自己走，必须由脚本驱动。关键点有三个：
• 直接赋值数字：用 el.value = 65，不是 el.setAttribute('value', '65')，后者只改 HTML 属性，不触发 DOM 值更新，Safari 尤其敏感
• 确保类型正确：从 input、URL 参数或 API 返回的值要转成数字，例如 Number(data.progress) 或 +data.progress
• 防超限：计算时用 Math.min(Math.round(loaded / total * 100), max)，避免因网络抖动导致 value > max，造成视觉“回弹”或 IE 下空白
上传类场景建议监听 XMLHttpRequest.upload.onprogress，它提供 event.loaded 和 event.total，比用定时器模拟更真实。
样式定制依赖伪元素，各浏览器写法不同
progress 本身不响应 background-color 或 width，必须用伪元素控制填充与轨道：
• 所有现代浏览器都需先加 appearance: none 清除默认控件样式
• Chrome/Safari/Edge：用 progress::-webkit-progress-bar 控轨道，progress::-webkit-progress-value 控填充色
• Firefox：用 progress::-moz-progress-bar（目前不支持分设轨道和填充）
• 不要给 progress 设 font-size，它不渲染文字，该属性无效
若需圆角、阴影或高度微调，只能通过外层容器控制 width、height 和 border-radius，内部填充由伪元素撑开。
IE10+ 基本可用，但深度兼容需降级方案
progress 在 IE10+、Chrome、Firefox、Safari 6+ 中原生支持，但 IE 对伪元素完全不支持，且对 value/max 类型校验极严（字符串 max="100" + 数字 value=60 会导致空白）。若项目仍需支持 IE9 或要求像素级样式一致，可采用渐进增强策略：
• HTML 层保留 <progress></progress> 作为语义主干
• CSS 中用 progress:not(:-webkit-progress-bar) 或特性查询做样式隔离
• JS 检测支持性：'value' in document.createElement('progress')，不支持时动态插入 <div class="fallback-progress"><span style="width: 0%"></span></div> 并同步更新 width
• 辅助文本（如“已上传 65%”）应独立于 progress 存在，用 aria-live="polite" 保证屏幕阅读器可读，不依赖 innerHTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
