如何反转Bootstrap 4进度条的动画方向

实现逻辑 #

Bootstrap 4 自带的条纹进度条动画默认从右向左流动，核心是内置的stripes关键帧动画通过调整background-position实现流动效果，我们只需要修改动画的播放方向即可实现反转，不需要修改原有框架逻辑。

具体实现方法 #

你可以根据使用场景二选一：

方案1：仅修改单个进度条（不影响全局） #

新增自定义CSS类，仅给需要反转的进度条添加该类即可：

/* 自定义反转动画类 */
.progress-bar-reverse {
  animation-direction: reverse;
}

使用时在进度条的class属性中追加progress-bar-reverse即可。

方案2：全局修改所有带动画的进度条 #

直接覆盖Bootstrap原有动画类的规则，所有添加了progress-bar-animated的进度条都会自动改为从左向右流动：

.progress-bar-animated {
  animation-direction: reverse !important;
}

修改后完整示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    /* 这里用的是方案1的自定义类，要全局改就替换成方案2的样式 */
    .progress-bar-reverse {
      animation-direction: reverse;
    }
  </style>
</head>
<body>
<div class="container py-4">
  <div class="row">
    <div class="col-md-6 offset-md-3">
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-reverse" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
        </div>
    </div>
  </div>
</div>

</body>
</html>

内容的提问来源于stack exchange，提问作者Vishal Vishwakarma