Status-Indikatoren wie Ladebildschirme und Fortschrittsanzeigen helfen den Nutzern deiner Applikation, die Prozesse hinter den Kulissen ein wenig besser zu verstehen. Insbesondere wenn es darum geht, Wartezeiten auf sich zu nehmen, ist ein aussagekräftiger und ästhetisch ansprechender Indikator ein wichtiger Faktor für eine bessere Usability.

Der Spin Loader liefert in einer aus mehreren Ringen bestehenden Animation Feedback über den aktuellen Laderfortschritt. Mit zunehmendem Ladefortschritt sinkt die Deckkraft des Loaders mit Hilfe von JavaScript. Für die Einbindung ins Dokument werden nur wenige Zeilen HTML benötigt. Auch das CSS ist im Vergleich zum Speicherplatzbedarf und zur Qualität eines GIFs zur Realisierung einer vergleichbaren Lösung relativ gering.

Der Ring-Indikator suggeriert durch eine Drehbewegung den Ladefortschritt und gibt diesen gut sichtbar in einem Prozentwert innerhalb des inneren Kreises wieder. Nur für den Status-Indikator und das Anhalten der Animation wird JavaScript benötigt – den Rest bewerkstelligt CSS.

Just Breathe verzichtet auf grafische Spielereien und liefert eine leicht verspielte, wortbasierte CSS-Ladeanimation. Das Markup besteht aus Span-Elementen, die mit CSS3-Keyframes animiert werden.

Der Minimal Counter zeigt mit einer an einen Kilometerstandszähler angelehnten Animation den aktuellen Ladefortschritt an. Durch die etwas komplexere Funktionsweise fällt bei der Benutzung des Counters etwas mehr CSS und JavaScript an, als bei anderen Lösungen.

Diese CSS-Lade-Animation besteht aus purem HTML und CSS und lässt animierte Punkte in verschiedenen Farben in den Viewport hinein- und wieder hinausfliegen. Mit einigen Zeilen JavaScript ließe sich die Überschrift zu einem vollwertigen Status-Indikator ausbauen.

Der Pong Ladestatus Indikator hat zwar keine detaillierte Aussagekraft über den Ladefortschritt, aber einen gewissen Unterhaltungsfaktor, der die Wartezeit versüßt. Mit nur wenigen gestylten Zeilen HTML und ganz ohne JavaScript kann dieser Loader in deinem Projekt eingebunden werden.

Tobias Ahlin bietet mit SpinKit acht schicke CSS Lade-Animationen die zur freien Verfügung auf GitHub zur Verfügung stehen. Auf der Webseite zum SpinKit kannst du alle Animationen sehen und antasten.

Mit Spin.js kannst du dir deine Lade-Animation ganz individuell zusammenstellen. Die schlanke JavaScript Bibliothek lässt dich das Aussehen des Spinners anpassen. Du kannst zum Beispiel die Größe, Breite, Geschwindigkeit und Dreh-Richtung des Spinners bestimmen. Spin.js funktioniert in aktuellen aber auch vielen älteren Browser-Modellen und kommt ohne jQuery oder sonstige JavaScript-Frameworks aus. Wer sowieso auf jQuery setzt ist mit dem Spin.js jQuery-Plug-In gut bedient.

Diese CSS-Ladeanimation sieht sehr futuristisch aus und erinnert ein wenig an Filme wie Tron Legacy. Die CSS3-Lade-Animation von Alessio Atzeni gibt es in drei verschiedenen Ausführungen. Hierbei stehen zwei verschiedene Spinner und eine „Balken-Ladeanimation“ zur Verfügung.

Auf (cs)spinner findest du eine kleine Sammlung von rund 18 Lade-Animationen, die mit purem CSS3 erzeugt werden können. Alles was für den Einsatz benötigt wird, ist das zum Download verfügbare Stylesheet. Die für die jeweiligen Animationen benötigten CSS-Klassen ermittelst du schnell mit der Live-Demo auf der (cs)spinner Webseite.

Die hier gezeigten Beispiele sind nur einige der unzähligen Lade-Animationen im Web. Bei Codepen findet ihr eine Zusammenfassung mit weiteren interessanten Ladebalken und Animationen zur Inspiration und für den Einsatz in eigenen Projekten.

Und? Welche Animation ist euer persönlicher Favorit?

Letztes Update des Artikels: 15. August 2014