bootstrap进度条需手动添加居中百分比文本和同步aria属性才能正常工作：外层包裹relative定位，内部span用absolute+transform居中；必须同时设置style.width和aria-valuenow；striped与animated不可共存；高频更新应节流并校验范围。
Bootstrap 进度条本身不自带“百分比数字居中显示”或“动态跟随动画”，所谓“美观”必须手动补全 DOM 结构和 JS 逻辑，否则只是一根单调色块。
如何让进度条显示居中的百分比数字
Bootstrap 的 .progress-bar 默认只渲染背景色块，不包含文本节点。要显示“65%”并随进度移动，得自己加一层包裹容器，并用绝对定位或 flex 对齐。
- 在
.progress-bar外层再包一个.progress-wrapper，设为position: relative - 在内部插入一个
<span class="progress-value">65%</span>，并设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 避免用
text-align: center—— 宽度随进度变化时文字会偏移，绝对定位+transform 才真正居中 - 如果用了
transition: width 0.3s，记得给.progress-value也加transition: opacity 0.2s，避免数字跳变
为什么只改 style.width 进度条却不更新
视觉不动，90% 是因为没同步更新两个关键属性：DOM 的宽度样式和 ARIA 属性。
- 必须同时设置
element.style.width = "72%"和element.setAttribute("aria-valuenow", "72") - 只改 JS 变量或 Vue data，但没触发 DOM 更新（比如忘了用
:style="{ width: progress + '%' }"） - 用了 jQuery
.text("72%")却漏了.css("width", "72%")，导致内容变了、色块没动 - 某些插件（如 Tooltip）初始化时会重置内联样式，检查是否在
data-bs-toggle后覆盖了style.width
.progress-bar-striped 和 .progress-bar-animated 不能共存
Bootstrap 5.3+ 明确不支持两者同时启用——不是 bug，是 CSS 层叠冲突导致动画失效。
-
.progress-bar-striped依赖background-image: linear-gradient(...) -
.progress-bar-animated依赖@keyframes progress-bar-stripes+animation触发位移 - 两者叠加后，
background-image被覆盖或 animation 帧被中断，条纹“冻住”不动 - 真要兼顾，得手写 CSS：
background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); animation: progress-bar-stripes 1s linear infinite;
高频更新时卡顿的根源和对策
每 50ms 直接写 style.width 会强制浏览器同步计算 layout，在低端安卓 WebView 或旧 Safari 上明显掉帧。
- 加 CSS 过渡：
.progress-bar { transition: width 0.2s ease-in-out; }，然后只做一次赋值 - 用
requestAnimationFrame节流，比如上传进度回调里先缓存值，再统一更新 - 别在 for 循环里连续设 100 次 width；先算终值，再一次性写入
- 服务端返回的进度值必须校验范围：
Math.min(100, Math.max(0, serverProgress))，否则出现width: 120%会撑破容器
最易被忽略的是无障碍一致性：哪怕 UI 看起来动了，如果 aria-valuenow 没同步，屏幕阅读器就念不出当前进度。这不是“锦上添花”，而是可访问性的硬性门槛。
