Animierte Fortschrittsbalken mit CSS
Der Einsatz von Inline-CSS gilt generell als kein guter Stil, weil dieser Ansatz die Wartung des Codes und das Einhalten konsistenter Anweisungen extrem erschwert. Doch wie immer gibt es auch hier Ausnahmen.
© Archiv
So zum Beispiel, wenn Sie die Inline-definierten Eigenschaften eines Elementes als Grundlage einer Animation nutzen möchten.
So ließe sich etwa durch die Übergabe von Werten über Inline-CSS ein Fortschrittsbalken animieren. Inline-CSS können Sie nämlich in Ihrem Markup mit Hilfe von DOM-Manipulationen anhand der Werte einer Serverabfrage einfügen:
<div class="fortschrittsbalken"><div style="width: 75%"> Der Upload wurde zu 75% abgeschlossen.</div></div>
In dem CSS überspringen Sie einfach den Parameter
to
beziehungsweise
100%
in Ihrer @keyframe-Deklaration und erhalten etwa:
@-webkit-keyframes fortschrittsbalken {
0% { width: 0; }
}
@-moz-keyframes fortschrittsbalken {
0% { width: 0; }
} Zu guter Letzt erzeugen Sie dann die Animation auf dem Selektor .fortschrittsbalken mittels:
.fortschrittsbalken > div {
-webkit-animation: progress-bar 2s;
-moz-animation: progress-bar 2s;
}
