Bootstrap原生不支持条纹+闪烁组合，因.progress-bar-animated仅控制background-position-x且无透明度动画；需自定义class与双@keyframes（位移+opacity）配合实现。

为什么 progress 原生样式不支持条纹+闪烁组合

Bootstrap 的 .progress-bar 默认只提供静态条纹（.progress-bar-striped）和动画条纹（.progress-bar-animated），但两者叠加时，.progress-bar-animated 会覆盖条纹的背景位置动画逻辑，导致条纹“动不起来”或闪烁失效。根本原因是 Bootstrap 5+ 中 .progress-bar-animated 使用的是 animation: progress-bar-stripes 1s linear infinite，而该动画只控制 background-position-x，未预留透明度/颜色切换空间。

手动覆盖 CSS 实现条纹 + 闪烁双效果

必须同时控制两个动画：一个驱动条纹位移，一个控制透明度周期变化。不能依赖 Bootstrap 内置的 .progress-bar-animated 类，需自定义 class 并重写 @keyframes。

• 给进度条添加自定义类，如 progress-bar-striped-pulse
• 用 @keyframes 定义两段独立动画：一段是 stripes-move（位移条纹），一段是 pulse-opacity（0.6 → 1 → 0.6 透明度循环）
• 在 class 中用 animation 同时声明两个动画，用逗号分隔，注意时长需错开（例如条纹 1s、闪烁 2s），避免同步卡顿
• 条纹背景必须用 linear-gradient 显式定义，不能依赖 Bootstrap 的默认值（它在暗色模式下可能失效）

@keyframes stripes-move {
  0% { background-position-x: 1rem; }
  100% { background-position-x: 0; }
}
@keyframes pulse-opacity {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.progress-bar-striped-pulse {
  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: stripes-move 1s linear infinite, pulse-opacity 2s ease-in-out infinite;
}

HTML 结构要注意 class 顺序和父容器

Bootstrap 进度条依赖嵌套结构：.progress → .progress-bar。如果漏掉外层 .progress，高度和圆角会丢失；如果把自定义 class 加在 .progress 上而非 .progress-bar，动画不会生效。

VPS Bootstrap

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

下载

• 必须将 progress-bar-striped-pulse 加在
  上
• 保留 .progress-bar-striped 可选，但它只是设置初始背景图，实际动画由自定义 CSS 驱动，可删可留
• 若使用 aria-valuenow 动态更新，确保 JS 修改的是 .progress-bar 的 style.width，而不是靠 data- 属性触发

<div class="progress">
  <div class="progress-bar progress-bar-striped-pulse" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>

移动端和深色模式下的兼容性坑

iOS Safari 对多 animation 声明的支持较弱，尤其当两个动画时长为整数倍关系时（如 1s 和 2s），可能出现闪烁跳帧。深色模式下，Bootstrap 的 rgba(255,255,255,.15) 条纹会过淡甚至不可见。

• 在 iOS 上，把闪烁动画时长改为质数（如 1.7s），能显著减少卡顿
• 深色模式建议改用 hsl() 背景色，例如 hsl(210, 10%, 70%) 替代白色透明条纹，保证对比度
• 加 will-change: opacity, background-position; 提升动画层性能，但仅在高频率更新时启用（避免过度触发合成）

真正难的不是写出来，而是让条纹位移和透明度变化在不同设备上节奏一致——稍有偏差，用户就会觉得“闪得不舒服”。这需要反复在真机上测 iOS、Android 和 Windows Edge 的渲染帧率。