原生元素语义清晰、轻量且无障碍友好，仅支持value和max属性，动态更新须用js修改.value；css自定义需兼容webkit、firefox和edge伪元素；方案更灵活可控，适合复杂样式与动画。

用 progress 元素实现原生进度条

HTML5 原生 <progress></progress> 是最轻量、语义最清晰的方案，浏览器默认渲染为横向进度条，支持无障碍访问。

关键点：它只接受 value 和 max 两个属性，value 必须在 0 到 max 范围内，否则不显示填充；未设 value 时呈现“不确定”状态（动画条）。

<progress value="65" max="100"></progress>

• max 默认是 100，但显式写出更稳妥，避免某些旧版 Safari 解析异常
• 直接写死 value 只适合静态展示；动态更新必须用 JavaScript 修改 .value 属性，不能改 innerHTML
• IE 10+ 支持，Edge 12+ 完全兼容；IE9 及以下需降级为 <div> 模拟 <h3>CSS 自定义 <code>progress 样式兼容写法

  各浏览器对 <progress></progress> 的伪元素支持差异大，要覆盖轨道和填充色，得分别处理 WebKit、Firefox 和 Edge。

  常见失效原因：漏写 ::-webkit-progress-bar 或误用 ::after —— 这些不是标准伪元素，必须用浏览器前缀版本。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  progress {
    width: 200px;
    height: 8px;
  }
  progress::-webkit-progress-bar { background-color: #e0e0e0; }
  progress::-webkit-progress-value { background-color: #4caf50; }
  progress::-moz-progress-bar { background-color: #4caf50; }
  progress:indeterminate::-webkit-progress-bar { background-color: transparent; }

  • Firefox 仅支持 ::-moz-progress-bar，不支持轨道自定义，所以背景色只能靠父容器模拟
  • Chrome/Edge 中 ::-webkit-progress-value 的宽度由 value/max 自动计算，不能用 width 覆盖
  • “不确定”状态（无 value）下，WebKit 渲染的是动画条，此时 ::-webkit-progress-value 不生效

  用 div + CSS 实现可控性更强的进度条

  当需要圆角、渐变、多段颜色、垂直方向或精确控制动画节奏时，<div> 方案更可靠，且兼容所有浏览器。 <p>核心逻辑：一个外层容器（<code>progress-container）限制尺寸和背景，一个内层 progress-fill 通过 width 或 transform: scaleX() 控制填充比例。

  <div class="progress-container">
    <div class="progress-fill" style="width: 72%;"></div>
  </div>

  • 用 width 更直观，但动画性能略差；用 transform: scaleX() 在大量并发进度条时更流畅
  • 设置 overflow: hidden 在容器上，防止填充块超出边界
  • 若需响应式，建议用 max-width + width: 100% 组合，避免固定像素值在小屏溢出

  JavaScript 动态更新进度时的常见陷阱

  进度条常配合加载、上传或计算任务使用，但直接循环加 value 会卡死 UI —— 浏览器没机会重绘。

  根本问题：JavaScript 单线程阻塞了渲染帧。必须把更新切片，交还控制权给浏览器。

  • 别用 for (let i = 0; i —— 这只会最终显示 100
  • 用 setTimeout 或 requestAnimationFrame 分帧更新，例如每 16ms 更新一次（≈60fps）
  • 上传场景中，应监听 XMLHttpRequest.upload.onprogress 或 fetch 的 ReadableStream，而不是轮询
  • 注意 progress 元素的 value 设置后，DOM 不会立即重绘，但后续 JS 执行不受影响

  真正难的不是画一条条，而是让进度数值和用户感知一致——比如上传卡在 99% 两秒，比匀速走到 100% 更让人焦虑。这点没法靠代码解决，得结合业务反馈节奏来调。