进度条不动因只改style.width未同步更新aria-valuenow；必须成对设置width和Math.round后的aria-valuenow，同时用data-percent配合::after显示数字，或直接内嵌文本节点并校验范围、节流更新。
只改 style.width 进度条不动？缺了 aria-valuenow
视觉没变化，90% 是因为只设置了 el.style.width = '65%'，却漏掉了同步更新 aria-valuenow。bootstrap 的进度条依赖这两个值严格一致才能触发渲染和无障碍读取。浏览器可能静默忽略不匹配的值，屏幕阅读器也会报错或读成 0。
- 必须成对操作：
el.style.width = value + '%'和el.setAttribute('aria-valuenow', Math.round(value)) -
aria-valuenow只接受整数，传82.7会触发 HTML5 验证警告，必须Math.round() - 用 jQuery 时别写成
$el.css('width', '65%')就停手，要链式补上.attr('aria-valuenow', 65) - Vue/React 中仅绑定
:style="{ width: percent + '%' }"不够，还得加:attr="{ 'aria-valuenow': Math.round(percent) }"
data-percent + ::after 显示数字，但不是“自动绑定”
很多人以为写了 content: attr(aria-valuenow) "%" 就能实时显示，其实不行——CSS 的 attr() 只读取属性快照，不会监听变化；而且 aria-valuenow 是数值型属性，IE11 不支持直接读取，content 里拼接 "%" 还会因语法错误失效。
- 正确做法：用自定义属性
data-percent，HTML 写成<div class="progress-bar" data-percent="65"> - CSS 中写
.progress-bar::after { content: attr(data-percent) "%"; }，并确保父容器.progress有position: relative - JS 更新时必须同步改两个地方：
el.dataset.percent = 65和el.setAttribute('aria-valuenow', 65) - 伪元素默认继承字体颜色，在深色背景上容易看不见，显式写
color: var(--bs-body-color)更稳妥
框架里直接插文本节点比伪元素更可控
在 Vue 或 React 里，往 .progress-bar 里直接放 {{ percent }}%，比靠 CSS 伪元素更可靠。它天然响应数据变化，不依赖属性监听，也不受定位上下文干扰，还能自然参与过渡动画。
- HTML 结构示例：
<div class="progress-bar">{{ percent }}%</div> - 配合
transition: width 0.3s, opacity 0.2s，避免数字跳变 - 文字居中用
text-align: center即可，不用绝对定位——因为宽度变化时，文字始终随容器缩放，不会偏移 - 若需兼容老项目或 SSR 场景，注意服务端渲染时
percent初始值不能为null或undefined，否则 DOM 里会留空文本节点
高频更新要节流，且校验范围
上传大文件或轮询进度时，JS 可能每 100ms 收到一次新值，但浏览器重绘频率有限。盲目高频设 style.width 不仅浪费性能，还可能导致动画卡顿、数值回跳甚至 DOM 更新被合并丢帧。
- 用
requestAnimationFrame包裹更新逻辑，确保与刷新率对齐 - 加简单节流：记录上一次更新时间戳，间隔小于 50ms 的更新直接跳过
- 务必校验输入范围：
value = Math.min(100, Math.max(0, value))，防止负值或超 100% 导致样式溢出或语义错误 - striped 和 animated 类不可共存——Bootstrap 5 的 CSS 规则会互相覆盖，选一个就好
aria-valuenow 和 data-percent 不是可选字段，而是语义必需项**。哪怕项目没接入读屏设备，省略它们也会让 Lighthouse 无障碍检测失败，且部分浏览器会降级处理动画逻辑。 
