Ratgeber: "HTML, CSS, Javascript & PHP" Animierte Fortschrittsbalken mit CSS
© Archiv
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;
}
