Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Denis Potschien 21. Juli 2015

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.

css3-loaderscss-teaser_DE

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.

loaderscss_beispiel1

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.

loaderscss_beispiel2

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.