Indeterminate progress bar using Bootstrap

1_indeterminate-progress.html

<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar"></div>
</div>

2_indeterminate-progress.css

@keyframes progress-bar {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}

.progress-bar {
  width: 100%;
  animation: progress-bar 0.5s linear, progress-bar 1s linear infinite 0.5s;
  transform-origin: 0 50%;
}