Bootstrap进度条不更新需同步设置style.width和aria-valuenow；高频更新应节流并用CSS transition；striped与animated不可共存；服务端进度值须校验并限定0–100范围。
Bootstrap 进度条不更新？检查 aria-valuenow 和 style.width 是否同步
进度条视觉不动，大概率是 dom 上的宽度样式没变，或者屏幕阅读器值没同步。bootstrap 的 .progress-bar 本身只是个带背景色的 div，它不自动动——你得手动改 style.width（比如 style="width: 65%"），同时最好也同步更新 aria-valuenow="65"，否则无障碍体验断裂。
常见错误：只改了 JS 里的变量值，忘了写回 DOM；或用 jQuery 的 .text() 去改进度数字，但没碰 style.width。
- 必须同时设置
style.width（支持百分比字符串，如"72%"）和aria-valuenow属性 - 如果用了
data-bs-toggle="tooltip"等交互组件，确保没在 tooltip 初始化时意外重置了 progress bar 的内联样式 - 用 CSS 变量控制颜色时，别把
--bs-progress-bg覆盖成透明，否则看起来像“没渲染”
动态更新进度条时，避免直接操作 style.width 导致性能抖动
高频更新（比如每 50ms 更新一次上传进度）时，反复写 style.width 会触发 layout，尤其在低端安卓 WebView 或旧版 Safari 上容易卡顿。更稳的方式是用 CSS transition + class 切换，或用 requestAnimationFrame 节流。
典型场景：文件上传、长任务分步执行、WebSocket 实时进度反馈。
- 给
.progress-bar加上transition: width 0.2s ease-in-out，然后只改 class 或style.width一次，让浏览器自己插值 - JS 中用
requestAnimationFrame包裹更新逻辑，避免连续强制同步布局 - 不要在 for 循环里直接设 100 次
width，先算终值，再一次性赋值
Bootstrap 5+ 的 progress 组件不支持 striped 和 animated 同时生效？
是的。Bootstrap 5.3+ 中，.progress-bar-striped 和 .progress-bar-animated 共存时，动画会失效——因为 striped 使用 background-image，而 animated 依赖 @keyframes progress-bar-stripes，两者叠加后 CSS 优先级冲突，动画帧被覆盖。
这不是 bug，是设计取舍：官方认为条纹动画在多数真实加载场景中干扰大于提示作用。
- 要动画效果，去掉
.progress-bar-striped，只留.progress-bar-animated - 要条纹但不要动画，保留
.progress-bar-striped，删掉.progress-bar-animated - 真要两者都要，得手写覆盖 CSS，比如重定义
background-image并启用 animation，但要注意 IE11 兼容性已放弃
服务端返回进度 0–100，前端却显示超过 100% 或负数？校验逻辑不能少
后端传来的进度值未必可信。网络延迟、并发回调、状态错乱都可能导致 progress = 105 或 progress = -3。Bootstrap 不做输入校验，直接塞进去就会溢出容器或倒退显示。
使用场景：AJAX 轮询、SSE 流式响应、Web Worker 回传计算进度。
- 更新前强制 clamp：
const safe = Math.min(100, Math.max(0, Number(val))) - 如果后端用小数（如
0.78）表示进度，前端别漏乘 100：Math.round(val * 100) - 遇到
NaN或undefined，建议 fallback 到上次有效值，而不是清零——用户会以为“进度归零了”
最常被跳过的其实是 aria 属性同步和数值校验。视觉动了不代表可访问，数值对了也不代表它不会超纲——这两处一漏，线上就容易收进“进度条卡死”或“进度闪退”的用户反馈。
