进度条CSS动画

$bgColor: #2d303f;

body {
  background: $bgColor;
}

.container {
  margin: 30px auto;
  width: 80%;
  max-width: 500px;
  text-align: center;
}

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

.progress-bar {	
  height: 18px;
	background-color: #ee202c;  
  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);
  }
}