JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress-container">
 <span class="background-progress-bar">
  <span class="progress-bar indeterminate"></span>
 </span>
 <span>
</div>

CSS

.progress-container {
  position: relative;
}

.background-progress-bar, .progress-bar {
  width: 100%;
  height: 10px;
  top: 0px;
  left: 0px;
  position: absolute;
}

.background-progress-bar {
  background-color: pink;
  z-index: 8;
}

.progress-bar { 
  background-color: red;
  z-index: 9;
}

.indeterminate {
  animation: indeterminate 2.5s infinite linear;
}

@keyframes indeterminate {
  0% {
    width: 30%;
    margin-left: 0px;
  }
  25% {
    width: 50%;
    margin-left: 50%;
  }
  50% {
    width: 10%;
    margin-left: 0px;
  }
  75% {
    width: 30%;
    margin-left: 0px;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}