必须同步更新 style.width 和 aria-valuenow，二者值须完全一致且为整数，否则破坏无障碍支持；伪元素依赖 data 属性快照，非实时响应；框架内直接插值更可靠，需防裁切并确保居中。
动态更新 style.width 和 aria-valuenow 必须同步
进度条动不起来，或者屏幕阅读器读错数值，90% 是因为只改了 width 没动 aria-valuenow，或反过来。这两个值必须始终一致，否则会破坏无障碍支持，也违背 Bootstrap 的语义约定。
常见错误现象：
- JS 里执行
$el.css('width', '85%')，但忘了$el.attr('aria-valuenow', 85) - 用 Vue 或 React 响应式绑定
:style="{ width: percent + '%' }"，却没同步绑定:attr="{ 'aria-valuenow': percent } - 服务端返回进度值为
82.7，直接塞进aria-valuenow→ 触发 HTML5 验证警告（该属性只接受整数）
实操建议：
- 每次更新都成对操作：
el.style.width = value + '%'; el.setAttribute('aria-valuenow', Math.round(value)) - 若用 jQuery：
$el.css('width', w + '%').attr('aria-valuenow', Math.round(w)) - 整数化处理不可省：
aria-valuenow不接受小数，浏览器可能静默截断或报错
data-percent + ::after 伪元素方案的实际限制
用 data-percent="75" 配合 CSS ::after { content: attr(data-percent) '%' } 看似干净，但它不是“自动绑定”，而是静态快照——属性变，伪元素才变；属性不变，哪怕 width 动画跑完了，文字也不会刷新。
容易踩的坑：
- 只调
el.style.width = '90%'，没碰data-percent→ 文字卡在旧值 - 在 IE11 中用
attr(aria-valuenow)→ 不支持，必须换data-前缀属性 - 伪元素默认继承父级字体，深色主题下白色文字贴着浅蓝进度条没问题，但换到深灰背景时直接看不见
实操建议：
- 把更新逻辑收拢到一个函数里，强制同步写入：
updateProgress(el, value) { el.dataset.percent = Math.round(value); el.style.width = value + '%'; el.setAttribute('aria-valuenow', Math.round(value)); } - 伪元素加
color和font-size显式声明，别依赖继承 - 若项目已用深色模式 CSS 变量，伪元素里用
color: var(--bs-body-color);比硬编码更稳妥
Vue/React 中用内联文字比伪元素更可控
在框架里往 .progress-bar 里直接插文本节点（如 <div class="progress-bar">{{ percent }}%</div>），比靠 CSS 伪元素更可靠。它天然响应数据变化，不依赖属性监听，也不受定位上下文干扰。
注意点：
- 文字会随进度条缩放——
width: 5%时文字极窄，可能被裁切，加overflow: hidden; text-overflow: ellipsis;防溢出 - 别套额外
<span></span>或<div> 包文字，会破坏 <code>.progress-bar默认的 flex 居中行为，导致文字偏左/偏上 - Bootstrap 5 的
.progress-bar默认有text-align: center，但若重写了样式，需手动补上 - Vue 模板中直接写：
<div class="progress-bar">{{ Math.round(percent) }}%</div> - React 中用
<div classname="progress-bar">{Math.round(percent)}%</div> - 加一层防抖：高频更新（如每 16ms）时，用
requestAnimationFrame聚合，避免过度重排 - 两个类不能共存于同一进度条：Bootstrap 官方文档明确说明
progress-bar-striped与progress-bar-animated互斥 - animated 的 CSS 动画帧率固定（通常 1s 循环），而 JS 控制的进度可能 200ms 就从 0 到 100%，导致条纹“还没滚完一圈，进度就结束了”
- striped 在低宽度（
- 仅在加载过程较长（>1.5s）且进度平缓时启用
progress-bar-animated - 若用 striped，建议搭配较宽的最小进度（如起步设为
width: 10%），确保条纹可见 - 动画类建议通过 JS 动态添加/移除：
el.classList.toggle('progress-bar-animated', isLongLoading)，而非写死在模板里
实操建议：
striped 和 animated 类与动态更新的兼容性
progress-bar-striped 和 progress-bar-animated 本身是纯 CSS 动画类，不影响 JS 更新逻辑，但它们和宽度动画叠加时容易产生视觉干扰——比如条纹滚动速度和进度增长不同步，看起来“卡顿”或“倒退”。
关键事实：
实操建议：
aria-valuenow 的整数约束和伪元素对属性变更的被动响应特性——它不会“感知” width 变化，只忠于 attr() 绑定的那个字符串。
