Fortschrittsbalken-Animation mit CSS3 anstatt mit JavaScript erstellen
Kommentare

Dass nicht alles sofort für jeden Nutzer problemlos geladen wird, ist nichts Neues. Fortschrittsbalken sollen darum den User darüber informieren, wie weit eine bestimmte Aufgabe – zum Beispiel der Up- oder Download von Dateien – fortgeschritten ist.

In der Vergangenheit benötigte man für das Erstellen einer Progress-Bar-Animation meist JavaScript, mittlerweile können solche Fortschrittsanzeigen auch mit CSS3 oder HTML5 erstellt werden. Sam Norton zeigt in einem Tutorial, wie man besonders einfach einen animierten Fortschrittsbalken nur mit CSS3 erstellen kann.

Fortschrittsbalken mit CSS3

Mit CSS3 lassen sich animierte Fortschrittsbalken erstellen, ohne dass dafür andere Technologien wie Flash oder JavaScript zum Einsatz kämen. Das Markup ist recht simpel: es besteht aus einem .container-Div, dem Titel und den gefüllten beziehungsweise ungefüllten Bereichen des Balkens. Die Animation der Balkens wird mit CSS3 Transitions und CSS3 Animation erstellt, womit sich der Name, die Dauer und das animation-iteration-count-Property definieren lassen.

Neben einem simplen Fortschrittsbalken kann dieser natürlich auch mit einem anderen Aussehen versehen und zum Beispiel gestreift dargestellt werden. Genauso kann auch ein Tracker erstellt werden. Wie man im Einzelnen dafür vorgehen sollte, zeigt Sam Nortons Tutorial mit zahlreichen Code-Beispielen.

Fortschrittsbalken mit HTML5 erstellen

Neben CSS3 bietet auch HTML5 Möglichkeiten, einen Fortschrittsbalken zu erstellen – nämlich mit dem eigens dafür entwickelten Progress-Bar-Element, das mit dem -Tag hinzugefügt wird. Der Fortschrittswert kann innerhalb des Tags dann mit den Attributen value, min und max definiert werden. Zudem bietet auch das Progress-Bar-Element einige weitere Gestaltungs- und Verfeinerungsmöglichkeiten, die Sam Norton ebenfalls mit Code-Beispielen ausführlicher erklärt.

Beachten sollte man beim Einsatz des Progress-Bar-Elements zum Erstellen eines Fortschrittsbalkens allerdings, dass noch nicht alle Browser das Element unterstützen. Zwar bieten Browser wie Firefox, Chrome, Safari und Opera bereits einen vollständigen Support, der Internet Explorer wird jedoch erst ab Version 10 teilweise unterstützt, und auch der Support auf Mobile-Plattformen ist, sieht man einmal von Android-Browser und dem Mobile Chrome ab, eher mau.

Aufmacherbild: Design of progress bar on blackboard, loading.. von Shutterstock / Urheberrecht: artproem

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -