HTML5用标签可直接实现基础进度条，value需为0–max间的数字（默认max=100），动态更新应直接赋值element.value而非setAttribute；文件上传需配合XMLHttpRequest.upload.onprogress手动更新，fetch原生不支持；仅当需全局加载提示等进阶功能时才考虑JS插件。
HTML5里怎么用
不用JS插件也能实现基础进度条——是HTML5原生标签，语义清晰、兼容性好（IE10+），适合静态或服务端控制的场景。
常见错误是把value设成字符串或超出max范围，导致不渲染或显示为“不确定”状态。
-
value必须是数字，且在0到max之间（默认max=100） - 动态更新时直接改
element.value = 65，不要用setAttribute（部分浏览器不触发UI重绘） - 若需兼容IE9及以下，才考虑回退到模拟，否则别急着引入JS插件
用
fetch上传时配合XMLHttpRequest.upload.onprogress实时更新真正需要JS介入的典型场景是文件上传——
本身不监听网络事件，得靠XHR或fetch的底层能力。注意：原生
fetch不支持上传进度，必须用XMLHttpRequest；否则得封装ReadableStream加TransformStream，对新手不友好。立即学习“前端免费学习笔记（深入）”；
- 用
XMLHttpRequest时，绑定xhr.upload.onprogress，不是xhr.onprogress -
event.loaded和event.total只在上传阶段有效，下载阶段要用xhr.onprogress - 避免高频触发UI更新，可用
requestAnimationFrame节流
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
document.getElementById('uploadProgress').value = percent;
}
};为什么别一上来就用
jQuery-ProgressBar或nprogress这些插件解决的是「全局加载提示」「路由跳转进度」「自定义动画」等进阶需求，和纯数据进度展示不是一回事。
新手常踩的坑：引入插件后发现
被覆盖、样式冲突、或者误以为插件能自动捕获所有AJAX请求进度（其实不能）。-
nprogress是模拟进度的“假条”，靠定时器推进，不反映真实上传/下载量 -
jQuery-ProgressBar依赖jQuery，而现代项目多用原生或axios，额外引入反而增加维护成本 - 如果只是显示一个上传完成度，3行原生JS +
足够，插件代码量可能是它的10倍
Chrome DevTools里怎么验证进度条是否真在动
别只看视觉效果——有些CSS动画会让
看起来在动，但value根本没变。最直接的办法是在Console里手动查值，或打断点观察事件是否触发。
- 在Console输入
document.querySelector('progress').value，看是否随上传实时变化 - 右键进度条 → “检查”，在Elements面板里盯着
value属性是否更新（不是只看style） - Network面板选中请求 → Headers → 查
Content-Length和Transfer-Encoding，确认服务端确实返回了可计算的Content-Length（否则e.lengthComputable为false）
实际项目里，进度条最难的往往不是调用，而是服务端是否返回明确的
Content-Length、是否支持分块上传、以及如何处理断点续传时的进度还原。这些细节比选哪个JS插件重要得多。 - 用
