<div class="container">    
  <div class="progress progress-striped">
    <div class="progress-bar">
    </div>                       
  </div> 
</div>

<div class="container">    
  <div class="progress2 progress-moved">
    <div class="progress-bar2" >
    </div>                       
  </div> 
</div>

<div class="container">    
  <div class="progress progress-infinite">
    <div class="progress-bar3" >
    </div>                       
  </div> 
</div>

$background: #2c303a;

body {
  font-family: 'Montserrat', sans-serif;
  background: $background;
}

.container {
  margin: 100px auto;
  width: 500px;
  text-align: center;
}

.progress {
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {	
  height: 18px;
	background-color: #ee303c;  
  border-radius: 4px; 
  transition: 0.4s linear;  
  transition-property: width, background-color;    
}

.progress-striped .progress-bar { 	
  background-color: #FCBC51; 
  width: 100%; 
  background-image: linear-gradient(
        45deg, rgb(252,163,17) 25%, 
        transparent 25%, transparent 50%, 
        rgb(252,163,17) 50%, rgb(252,163,17) 75%,
        transparent 75%, transparent); 
  animation: progressAnimationStrike 6s;
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}
 
.progress2 {
  padding: 6px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.25);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar2 {
  height: 18px;
  border-radius: 30px;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;  
  transition-property: width, background-color;    
}

.progress-moved .progress-bar2 {
  width: 85%; 
  background-color: #EF476F;  
  animation: progressAnimation 6s;
}

@keyframes progressAnimation {
  0%   { width: 5%; background-color: #F9BCCA;}
  100% { width: 85%; background-color: #EF476F; }
}

$green: #4cd964;
$turquoise: #5ac8fa;
$blue: #007aff;
$light-blue: #7DC8E8;
$purple: #5856d6;
$red: #ff2d55;

.progress-bar3 {
  height: 18px;
  border-radius: 4px;
  background-image: 
     linear-gradient(to right, 
       $green, $turquoise, $blue, 
       $light-blue, $purple, $red);
  transition: 0.4s linear;  
  transition-property: width, background-color;    
}

.progress-infinite .progress-bar3 { 	 
  width: 100%; 
  background-image: 
    linear-gradient(to right, $green, $turquoise, $blue, $light-blue, $purple, $red);
  animation: colorAnimation 1s infinite;
}

@keyframes colorAnimation {
  0% { 
    background-image: 
    linear-gradient(to right, $green, $turquoise, $blue, $light-blue, $purple, $red);
  }
  20% { 
    background-image: 
    linear-gradient(to right, $turquoise, $blue, $light-blue, $purple, $red, $green);
  }
  40% { 
    background-image: 
    linear-gradient(to right, $blue, $light-blue, $purple, $red, $green, $turquoise);
  }
  60% { 
    background-image: 
    linear-gradient(to right, $light-blue, $purple, $red, $green, $turquoise, $blue);
  }
  100% { 
    background-image: 
    linear-gradient(to right, $purple, $red, $green, $turquoise, $blue, $light-blue);
  }
}

/* if you like ❤️ this pen */