Bootstrap进度条必须用.progress包裹.progress-bar，宽度只能通过style="width:X%"控制；.progress-bar需手动添加transition才能实现宽度动画；条纹动画需自定义linear-gradient和keyframes；低进度文字溢出应设min-width:2em；高度调在.progress上，颜色用bg-*类，ARIA属性须严格同步。
Bootstrap进度条必须用 .progress 包裹 .progress-bar，且宽度只能靠 style="width: X%" 控制——类名如 progress-bar-25 在 Bootstrap 4+ 中根本不存在，硬写会失效。
为什么直接改 style.width 没动画？
因为 .progress-bar 默认没设 transition，浏览器直接跳变。加这一行就解决：
.progress-bar {
transition: width 0.4s ease;
}
注意三点：
- 必须写在
.progress-bar上，写在.progress容器上无效 - 不能用
transition: all，否则background-color切换时会意外抖动 - 如果 JS 初始化时从 0 开始，确保初始
style.width是"0%"，别依赖 class 隐式值（比如没设 width 就直接 JS 赋值，起点不明确会导致动画不触发）
.progress-bar-striped 怎么让它动起来？
Bootstrap 自带的条纹是 base64 图片，background-position 动画对它不起作用。得换成 linear-gradient：
.progress-bar-striped {
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);
background-size: 1rem 1rem;
animation: progress-bar-stripes 1s linear infinite;
}
<p>@keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 1rem 1rem; }
}</p>
关键匹配点：
-
background-size和@keyframes里的位移值必须一致，否则条纹断裂或拉伸 - 如果进度条高度设成
8px，把1rem全部换成0.5rem（1rem = 16px，0.5rem = 8px） - 别和
.progress-bar-animated混用——这个类在 Bootstrap 5+ 才有，4.x 不识别
标签文字被进度条“吃掉”怎么办？
进度低于 5% 时，2% 这类文字常溢出填充区域，看不见。两个可靠解法：
- 给
.progress-bar加min-width: 2em（比单纯设1em更稳妥，防字体缩放） - 用
text-align: center+overflow: visible强制显示，但需确认父容器没overflow: hidden - 绝对不要用
white-space: nowrap硬撑——在窄屏下会把文字推出视口
示例写法：
高度、颜色、语义化怎么配才不翻车？
所有高度调整必须加在 .progress 容器上，.progress-bar 会自动继承；颜色统一用 bg-* 类（如 bg-success），别混用旧版 progress-bar-success（Bootstrap 4+ 已废弃）：
- 高度：写 ，别碰
.progress-bar的height- 颜色：用
bg-primary/bg-warning等，不是progress-bar-primary- ARIA 属性别漏：至少保留
role="progressbar"、aria-valuenow、aria-valuemin、aria-valuemax，否则屏幕阅读器读不出进度最易忽略的是：
aria-valuenow必须和style.width数值严格同步，差 1% 都可能让辅助技术误判。 - 颜色：用
