201209Mär

Throbber.js: Ajax-Preloader mit HTML5 und JavaScript

Bekannt wurden die animierten Grafiken wahrscheinlich durch Flash, spätestens seit der Verbreitung von Ajax sind sie Bestandteil dynamischer Webanwendungen: Preloader-Grafiken, die auch als "Spinner" oder "Throbber" bezeichnet werden, signalisieren dem Benutzer, dass Inhalt geladen wird. In der HTML-Welt wurden diese Animationen in der Regel durch animierte GIF-Grafiken umgesetzt. Seit HTML5 und CSS3 sieht das Ganze etwas anders aus: Mit Spin.js lassen sich die Animationen auch ohne Grafiken einsetzen und mit CSS Load wird lediglich ein CSS3-fähiger Webbrowser benötigt.
Die Lücke schließt nun das Skript Throbber.js, denn damit lassen sich Preloader-Grafiken auch durch das HTML5-Canvas-Element einbinden.

Throbber.js

Der Stil der Throbber.js-Animationen ähnelt typischen Preloadern und auch der Lade-Animation von Mac OS X. Ein Beispiel für die Erzeugung eines Canvas-Throbbers:

  • var throb = new Throbber({
  • color: "yellow",
  • padding: 30,
  • size: 40,
  • fade: 200,
  • clockwise: false
  • }).appendTo( document.getElementById("t3")).start();
  •  
  • document.getElementById("b3").onclick = function() {
  • throb.toggle();
  • };

So können verschiedene Attribute wie Farbe, Größe, Geschwindigkeit, Drehrichtung, FPS, Stil oder auch ein Callback festgelegt werden. Zudem bietet Throbber.js den Bonus, dass für Browser, die kein HTML5 unterstützen, ein GIF-Fallback erzeugt und angezeigt wird.