用 <progress></progress> 元素直接表示任务进度
HTML 里没有“进度指示器”这个抽象概念，只有 <progress></progress> 元素——它专为展示确定范围内的完成度而生。别想用 <div> + CSS 模拟来替代，浏览器原生支持意味着可访问性（屏幕阅读器能读出百分比）、键盘操作（<code>Tab 进入、Enter 触发）和默认样式一致性。
常见错误是把它当加载动画用：比如 AJAX 请求还没返回 max 和 value 就急着渲染，结果出现空进度条或报错 NaN。它不处理异步逻辑，只负责呈现已知的数值状态。
-
value必须在0到max之间（默认max=100），超出会静默截断，但 UI 不提示 - 如果任务进度未知（比如文件上传总大小未响应），该用
<meter></meter>或干脆不用原生元素，改用带 ARIA 的自定义组件 -
<progress value="65"></progress>会显示 65%，但若没设max，它按默认 100 算；设成max="200"再配value="130"，也还是 65%
aria-valuenow 和 aria-valuemin/aria-valuemax 是给 JS 动态更新用的
当进度靠 JavaScript 实时更新（比如轮询接口、监听上传事件），不能只改 value 属性——得同步更新 ARIA 属性，否则屏幕阅读器可能卡在旧值。原生 <progress></progress> 本身会自动映射这些属性，但前提是 DOM 更新及时且无阻塞。
容易踩的坑是把更新逻辑写在长任务里（比如一次处理上万条数据），导致 UI 卡住、ARIA 值滞后。浏览器不会主动重绘，你得手动触发或拆分任务。
立即学习“前端免费学习笔记（深入）”；
- 每次更新
progress.value后，立刻设progress.setAttribute('aria-valuenow', newValue)（虽然通常冗余，但某些旧版 Safari 需要） - 避免在
for循环里连续赋值value，改成用requestAnimationFrame或setTimeout(..., 0)分帧更新 - 如果后端只返回百分比字符串（如
"72%"），记得先parseFloat("72%")再赋给value，否则会被当无效值忽略
样式受限但可定制，::-webkit-progress-bar 等伪类不是标准
<progress></progress> 的外观由浏览器决定，CSS 能控制的部分有限。主流方案是重置默认样式再重建，但要注意兼容性断层：Firefox 用 ::-moz-progress-bar，Chrome/Safari 用 ::-webkit-progress-value，而 Edge（Chromium 版）已统一到 WebKit 行为。
别试图用 background: linear-gradient() 直接盖在 <progress></progress> 上——它内部是 shadow DOM 结构，普通选择器进不去。必须用伪元素穿透。
- 清除默认边框和背景：
progress { appearance: none; border: none; background: transparent; } - 填充色只能通过
progress::-webkit-progress-value（Chrome/Safari）和progress::-moz-progress-bar（Firefox）分别设置 - IE 完全不支持
<progress></progress>，降级方案只能是显示文字“已完成 45%”，别硬加 polyfill
服务端渲染时 value 为 0 不代表“未开始”，可能是初始占位
SSR 页面首次加载，常把 <progress value="0"></progress> 当作默认态。但用户看到的是“0%”，容易误解为卡死或失败。其实它只是初始值，后续 JS 才会接管并推进。
更稳妥的做法是延迟渲染整个 <progress></progress>，等 JS 加载并获取首个进度值后再插入 DOM；或者用 aria-busy="true" 标记加载中状态，配合视觉隐藏。
- 服务端输出
<progress value="0" aria-hidden="true"></progress>，JS 初始化后移除aria-hidden并更新value - 如果首屏必须显示进度条，至少加一句辅助文本：
<span aria-live="polite">正在加载…</span>，让屏幕阅读器可感知状态变化 - 注意 SSR 和 CSR 进度值不一致的风险：比如服务端吐出
value="30"，但客户端初始化时又从 0 开始，会导致视觉跳变
<progress></progress> 的边界很清晰：它只适合已知范围、可量化、需无障碍支持的线性进度。一碰到“预计还需 2 分钟”“步骤 3/5”“上传中（1.2MB/3.8MB）”，就得切到 <meter></meter> 或自定义方案——这时候别硬套，反而增加维护成本。
