SOURCE

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

$border-radius: .25rem;
$progress-height: 1rem;
$progress-fontsize: .75rem;
$gray-200: #e9ecef;
$blue: #007bff;
.progress{
  display: flex;
  height: $progress-height;
  overflow: hidden;
  font-size: $progress-fontsize;
  background-color: $gray-200;
  border-radius: .25rem;
  // 内凹效果
  box-shadow: inset 0 .1rem .1rem  rgba(#000, .1);
}

// 蓝色进度条
.progress-bar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: no-wrap;
  background-color: $blue;
  color: #fff;
  transition: width .6s ease;
}

// 条纹进度条
.progress-bar-striped{
  background-image:linear-gradient(45deg, rgba(#000, .15) 25%, transparent 0 , transparent 50%, rgba(#000,.15) 0%, rgba(#000, .15) 75%, transparent 0, transparent 100%);
  background-size: $progress-height $progress-height;
}
@keyframes progress-bar-stripes{
  from{
    background-position: 0 0;
  }to{
    background-position:1rem 0;
  }
}
// 动画
.progress-bar-animated{
  animation: progress-bar-stripes 1s infinite linear;
}