CSS3: Lade-Animationen mit loaders.css

Zwar sollte im Web immer alles ganz schnell gehen. Aber gerade komplexe Webanwendungen brauchen schon mal ihre Zeit, bis alle Inhalte geladen sind. Mit statischen Grafiken oder kleinen Animationen wird dann gerne mal darauf aufmerksam gemacht, dass noch Daten geladen werden. In den Zeiten von CSS3 müssen solche Lade-Animationen längst nicht mehr mit animierten GIFs realisiert werden. loaders.css stellt eine Reihe von Animationen zur Verfügung, die allesamt per CSS3 gestaltet und animiert sind.

28 Lade-Animationen per HTML und CSS3 ausgezeichnet

loaders.css beinhaltet knapp 30 verschiedene Lade-Animationen – von klassisch bis ausgefallen. Neben bekannten animierten Grafiken, bei denen Kreise beziehungsweise Striche kreisförmig angeordnet sind, gibt es auch einige eher ungewöhnlicher Formen und Bewegungen. Unter anderem existiert eine Art Pacman, der emsig Kreise frisst, sowie viele springende beziehungsweise tanzende Kreise.

Bekannte Lade-Animationen

Alle Animationen sind mit der @keyframes-Regel und der animation-Eigenschaft von CSS3 ausgezeichnet. In der Stylesheet-Datei loaders.css sind alle Animationen definiert. Angewendet werden sie, indem eine Klasse einem HTML-Element hinzugefügt wird. Je nach Typ muss noch eine bestimmte Anzahl an <div>-Elementen ergänzt werden.

<div class="ball-pulse">
  <div></div>
  <div></div>
  <div></div>
</div>

Im Beispiel wird per ball-pulse eine Lade-Animation mit drei nebeneinander angeordneten Punkten, die abwechselnd ihre Größe ändern, dargestellt. Da jeder Punkt über ein eigenes HTML-Element definiert wird, muss der Container mit der Klasse ball-pulse drei Kindelemente besitzen, die per CSS angesprochen werden.

Pacman als Lade-Animation

In der Demo-HTML-Datei sind alle 28 Lade-Animationen aufgeführt. Daraus lässt sich auch ableiten, wie viele leere Kindelemente die jeweilige Animation benötigt. Bei den Kindelementen muss es sich zwingend um <div>-Elemente handeln, was aber ohnehin sinnvoll ist. Schließlich besitzen diese Elemente keinerlei semantische Funktion, welche die Verwendung eines anderen Elements rechtfertigen würde.

jQuery-Ergänzung für einfachere Handhabung

Wer die richtige Anzahl an Kindelementen nicht manuell hinzufügen möchte, kann auch die mitgelieferte JavaScript-Datei einsetzen. Diese beinhaltet eine kleine Funktion – basierend auf jQuery –, welche die richtige Anzahl an <div>-Elementen für jede Lade-Animation automatisch ergänzt. In diesem Fall muss also nur noch ein Element mit der jeweiligen Klasse für die Animation ausgezeichnet werden.

Die JavaScript-Datei wird einfach am Ende des jeweiligen HTML-Dokuments eingefügt.

Farben anpassen

Standardmäßig sind die Lade-Animationen weiß und somit für farbige Hintergründe gedacht. Die Farbe der animierten Grafik lässt sich jedoch recht einfach ändern, indem die Hintergrundfarbe aller <div>-Kindelemente geändert wird.

.ball-pulse > div {
  background-color: black;
}

Im Beispiel wird die Farbe für die Animation ball-pulse auf Schwarz geändert.

Über die Stylesheet-Datei loaders.css kann man natürlich auch das Aussehen und Verhalten der Animation beeinflussen. Über das animation-Attribut kann dann zum Beispiel die Länge der Animation verändert werden. Auch Form und Aussehen der Lade-Animation lassen sich über die Datei anpassen – mit den Mitteln, die CSS3 zur Verfügung stellt.

Browsersupport

Die Animationen von loaders.css sind nichts für ältere Browser. Chrome unterstützt sie ab Version 41, Firefox ab Version 36 und Safari ab Version 8. Im Internet Explorer laufen sie auch, aber erst ab Version 11.

loaders.css steht unter der weit verbreiteten MIT-Lizenz und kann somit kostenlos eingesetzt werden.

(dpe)