Ratgeber: "HTML, CSS, Javascript & PHP"

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.

Animierte Fortschrittsbalken mit CSS

© Archiv

Animierte Fortschrittsbalken mit CSS

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;
}

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…