Beispiel für die Implementierung einer farbigen Fortschrittsbalkenanimation mit CSS3

<div Klasse="Container">    
  <div Klasse="Fortschritt Fortschritt-gestreift">
    <div Klasse="Fortschrittsbalken">
    </div>                       
  </div> 
</div>

<div Klasse="Container">    
  <div Klasse="Fortschritt2 Fortschritt verschoben">
    <div Klasse="Fortschrittsbalken2" >
    </div>                       
  </div> 
</div>

<div Klasse="Container">    
  <div Klasse="Fortschritt Fortschritt-unendlich">
    <div Klasse="Fortschrittsbalken3" >
    </div>                       
  </div> 
</div>

Körper {
  Schriftfamilie: „Montserrat“, serifenlos;
  Hintergrund: #2c303a;
}

.container {
  Rand: 100px automatisch;
  Breite: 500px;
  Textausrichtung: zentriert;
}

.Fortschritt {
  Polsterung: 6px;
  Hintergrund: rgba(0, 0, 0, 0,25);
  Rahmenradius: 6px;
  Boxschatten: Einschub 0 1px 2px rgba(0, 0, 0, 0,25), 0 1px rgba(255, 255, 255, 0,08);
}

.Fortschrittsbalken {
  Höhe: 18px;
  Hintergrundfarbe: #ee303c;
  Rahmenradius: 4px;
  Übergang: 0,4 s linear;
  Übergangseigenschaft: Breite, Hintergrundfarbe;
}

.Fortschrittsstreifen .Fortschrittsbalken {
  Hintergrundfarbe: #FCBC51;
  Breite: 100 %;
  Hintergrundbild: linearer Farbverlauf (45 Grad, #fca311 25 %, transparent 25 %, transparent 50 %, #fca311 50 %, #fca311 75 %, transparent 75 %, transparent);
  Animation: FortschrittAnimationStrike 6s;
}

@keyframes progressAnimationStrike {
  aus {
    Breite: 0;
  }
  Zu {
    Breite: 100 %;
  }
}
.fortschritt2 {
  Polsterung: 6px;
  Rahmenradius: 30px;
  Hintergrund: rgba(0, 0, 0, 0,25);
  Boxschatten: Einschub 0 1px 2px rgba(0, 0, 0, 0,25), 0 1px rgba(255, 255, 255, 0,08);
}

.Fortschrittsbalken2 {
  Höhe: 18px;
  Rahmenradius: 30px;
  Hintergrundbild: linearer Farbverlauf (nach unten, rgba (255, 255, 255, 0,3), rgba (255, 255, 255, 0,05));
  Übergang: 0,4 s linear;
  Übergangseigenschaft: Breite, Hintergrundfarbe;
}

.progress-moved .progress-bar2 {
  Breite: 85 %;
  Hintergrundfarbe: #EF476F;
  Animation: Fortschrittsanimation 6 s;
}

@keyframes FortschrittAnimation {
  0% {
    Breite: 5%;
    Hintergrundfarbe: #F9BCCA;
  }
  100 % {
    Breite: 85 %;
    Hintergrundfarbe: #EF476F;
  }
}
.Fortschrittsbalken3 {
  Höhe: 18px;
  Rahmenradius: 4px;
  Hintergrundbild: linearer Farbverlauf (nach rechts, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  Übergang: 0,4 s linear;
  Übergangseigenschaft: Breite, Hintergrundfarbe;
}

.progress-unendlich .progress-bar3 {
  Breite: 100 %;
  Hintergrundbild: linearer Farbverlauf (nach rechts, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  Animation: Farbanimation 1s unendlich;
}

@keyframes Farbanimation {
  0% {
    Hintergrundbild: linearer Farbverlauf (nach rechts, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  }
  20% {
    Hintergrundbild: linearer Farbverlauf (nach rechts, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
  }
  40 % {
    Hintergrundbild: linearer Farbverlauf (nach rechts, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
  }
  60 % {
    Hintergrundbild: linearer Farbverlauf (nach rechts, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
  }
  100 % {
    Hintergrundbild: linearer Farbverlauf (nach rechts, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
  }
}