HTML5原生标签语义化且可访问，但需用CSS伪元素统一跨浏览器样式：WebKit用::-webkit-progress-bar/value，Firefox用::-moz-progress-bar，同时重置appearance、尺寸和边框，并通过class切换替代直接修改value以避免动画卡顿。
直接用
HTML5 原生 是语义化、可访问、无需 JS 就能工作的进度条，但它在 Chrome/Firefox/Safari 中渲染差异大，比如：Chrome 显示蓝色条+阴影，Firefox 是绿色无边框，Safari 甚至不支持 value 动态更新（旧版本）。想统一外观，必须靠 CSS 覆盖伪元素，不能只改 自身样式。
progress 的伪元素怎么选？::-webkit-progress-bar 和 ::-moz-progress-bar 都要写
WebKit 内核（Chrome/Safari）用 ::-webkit-progress-bar 控制背景，::-webkit-progress-value 控制已填充部分；Gecko（Firefox）只认 ::-moz-progress-bar，且它直接代表“已填充区域”，没有单独的背景伪元素。Edge（Chromium 版）走 WebKit 规则，IE 不支持 —— 所以兼容写法必须同时覆盖两套。
- Chrome/Safari：先设
progress::-webkit-progress-bar背景，再用progress::-webkit-progress-value设颜色和圆角 - Firefox：只写
progress::-moz-progress-bar，它等效于 WebKit 的value，但不能设宽度或动画 - 所有浏览器都要重置
progress自身的 border、padding、height，否则伪元素尺寸会错乱
progress {
appearance: none;
height: 8px;
width: 100%;
border: none;
background: #e0e0e0;
border-radius: 4px;
}
progress::-webkit-progress-bar {
background: #e0e0e0;
border-radius: 4px;
}
progress::-webkit-progress-value {
background: #4caf50;
border-radius: 4px;
transition: width 0.3s ease;
}
progress::-moz-progress-bar {
background: #4caf50;
border-radius: 4px;
}
动态更新时卡顿或跳变？别直接改 value，用 CSS class 切换更稳
JS 直接赋值 progress.value = 65 本身没问题，但若频繁触发（比如每 50ms 更新），WebKit 下 ::-webkit-progress-value 的 width 动画可能掉帧，Firefox 更是完全不支持 transition 在 ::-moz-progress-bar 上生效。稳妥做法是预设多个 class（如 is-30、is-65），JS 只切换 class，CSS 控制对应状态的 value 和动画。
- HTML 中加
value属性作为初始值： - CSS 中用属性选择器匹配：
progress.is-30[value="30"]::-webkit-progress-value { width: 30%; } - JS 改 class 和
value两个地方，确保可访问性（ARIA 屏幕阅读器依赖value）
需要文字百分比？
是替换元素（replaced element），内部不能插子节点，所以 的 “65%” 不会显示。必须在外层包容器，用 单独放文本，并监听 progress 的 value 变化同步更新。
立即学习“前端免费学习笔记（深入）”；
- 不要用
innerText硬写死，要读取progress.value实时计算：span.textContent = Math.round(progress.value) + '%'; - 如果进度条是静态的（如加载完就固定），可用 CSS 伪元素 +
attr(value)，但仅限 Firefox 支持，Chrome 不行 —— 所以还是 JS 同步最可靠 - 注意 aria-valuetext：给
加上aria-valuetext="已完成 65%"，提升读屏体验
真正难的不是画一条条，而是让不同内核按你想要的方式动起来，还不出 bug。伪元素名记混、忘记重置 appearance、或者在 Firefox 里试图给 ::-moz-progress-bar 加 transition——这些才是实际项目里卡半天的地方。
