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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".