Bootstrap 进度条(Progress)增加背景动画效果-Bootstrap教程-PHP中文网

Bootstrap进度条默认无动画，仅靠width变化；需手动添加transition实现平滑填充，或用linear-gradient+@keyframes+background-position实现流动背景动画。

Bootstrap 进度条默认不带动画，`transition` 是关键

bootstrap 5 的 .progress-bar 默认只有宽度变化，没有视觉动画——因为缺少 css transition 声明。它本身不内置背景动画（比如扫描线、渐变流动），只靠 width 动画实现填充效果。要加背景动画，得手动补上过渡行为或叠加伪元素。

常见错误是直接给 .progress-bar 加 background-image: linear-gradient(...) 却没配 background-position 动画，结果渐变“卡死”不动。

必须显式设置 transition: width 0.6s ease（否则宽度变化突兀）
若用 CSS 渐变做动态背景，需配合 @keyframes + background-position 移动
Bootstrap 5 已移除 .progress-bar-striped 的自动动画类（.progress-bar-animated 仅控制条纹位移，不触发背景流动）

`.progress-bar-animated` 只驱动条纹移动，不是万能背景动画开关

这个类在 Bootstrap 5 中仅对 background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%), ... 类型的条纹背景生效，通过 animation: progress-bar-stripes 1s linear infinite 水平平移实现“滚动条纹”效果。它不作用于自定义渐变、SVG 背景或纯色。

如果你替换了 background 但保留了 .progress-bar-animated，动画大概率失效——因为原生动画依赖特定的多层条纹背景图结构。

检查浏览器开发者工具中 .progress-bar 的最终 background-image 是否仍为 Bootstrap 默认条纹值
若用了自定义渐变，必须自己写 @keyframes 并绑定到 background-position
注意：background-size 需设为大于容器宽高（如 200% 200%），否则 background-position 移动无可见变化

用 CSS 实现流动渐变背景（兼容 Bootstrap 5）

这是最可控的方式：不依赖 .progress-bar-animated，而是用纯 CSS 给 .progress-bar 添加流动感。核心是三层声明：background-image 定义渐变方向与色停，background-size 扩展可动画区域，animation 驱动位移。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.progress-bar.flow-bg {
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: flowBG 2s linear infinite;
}
@keyframes flowBG {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

使用时只需在进度条上加 flow-bg 类：

<div class="progress">
  <div class="progress-bar flow-bg" role="progressbar" style="width: 65%"></div>
</div>

动画方向由 linear-gradient 角度决定（90deg = 左→右，180deg = 上→下）
background-size: 200% 100% 确保动画有足够“画布”，否则会闪断
避免在 .progress-bar 上同时用 .progress-bar-striped 和自定义 flow-bg —— 层叠顺序可能导致条纹被盖住