HTML5原生标签语义正确、无需JS即可渲染，基础写法为，value超max会出错，不设value显示不确定状态；CSS定制需注意浏览器伪元素差异，JS更新应节流避免重排，IE需降级处理但现已少用。

用 <progress></progress> 标签最直接

HTML5 原生支持进度条，<progress></progress> 是语义正确、无需 JS 就能渲染的方案。它默认显示为横向条状，浏览器自动处理样式和可访问性。

基础写法：

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

其中 value 表示当前完成值，max 是总量（默认 100）。不设 value 会显示“不确定”状态（带动画的流动条）。

常见误操作：

• 把 value 设成大于 max 的数——部分浏览器会忽略或报错，建议提前校验
• 在未加载完资源时就硬写死 value="75"——这仅是静态展示，真要反映加载进度还得配合 JS
• 用 <div> + CSS 模拟替代——没必要，除非要深度定制外观且兼容 IE（但 IE 已淘汰）<h3>用 CSS 控制外观时注意伪元素名</h3> <p>Chrome / Edge / Safari 支持 <code>::-webkit-progress-bar 和 ::-webkit-progress-value；Firefox 用 ::progress-bar 和 ::progress-value（实际支持有限），所以通用做法是优先覆盖 WebKit 内核样式。

  例如加圆角和颜色：

  progress { height: 8px; border-radius: 4px; }

  progress::-webkit-progress-bar { background-color: #eee; border-radius: 4px; }

  progress::-webkit-progress-value { background-color: #4CAF50; border-radius: 4px; }

  注意：::-webkit-progress-value 宽度由浏览器根据 value/max 自动计算，别手动设 width，否则会冲突。

  JS 动态更新 value 要避免频繁触发重排

  如果进度来自文件上传、AJAX 或定时任务，用 JS 修改 value 即可：

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  const prog = document.querySelector('progress');<br>prog.value = 65;

  但要注意：

  • 不要在循环里每毫秒都设一次 value——人眼分辨不出高频变化，反而拖慢主线程
  • 推荐节流：比如用 requestAnimationFrame 或每 50ms 更新一次
  • 如果后端只返回百分比字符串（如 "65%"），记得先用 parseInt() 提取数字，否则赋值会失败

  IE 不支持 <progress></progress>，但 fallback 很简单

  IE11 及更早版本完全不识别 <progress></progress>，会把它当普通行内元素渲染（可能只显示文字内容）。不需要 polyfill，用 CSS 隐藏原生标签、显示降级内容即可：

  <progress value="42" max="100">42% loaded</progress>

  然后加一段 CSS：

  progress { display: inline-block; }<br>@supports not (display: progress) {<br>  progress { display: none; }<br>  progress::after { content: attr(value); }<br>}

  不过现在绝大多数项目已不需兼容 IE，这步可跳过。

  真正容易被忽略的是：进度条本身不提供交互反馈，用户无法拖动或点击。如果需要“可操作进度”，得换成 <input type="range"> 并自行绑定逻辑——那已经不是进度条，而是滑块控件了。