Spin.js ist eine Bibliothek zum Anzeigen von Wartekreisen besser als “Spinner” bekannt. Die Library benutzt hierfür keine Grafiken sondern macht das ausschliesslich über CSS3 bzw. über einen VML Fallback für ältere IE Versionen.

Die Handhabung ist denkbar einfach. Möchte man in einem div Element einen Spinner anzeigen so übergibt man dieses der Methode spin()

var output = document.getElementById("output");
var spinner = new Spinner();
spinner.spin( output );

Damit erzeugt man die Spinning Animation zentriert in diesem DIV Element.

Einsatzszenario Grafiken laden

Typischerweise benötigt man einen Spinner wenn man Sachen asynchron nachlädt und die Zeitspanne des Nachladens länger dauert als die Gesamte Anzeige. Möchte man zum Beispiel eine große Grafik dynamisch nachladen ohne das ein leeres Grafikelement angezeigt wird so kann man hier Spin.js einsetzen.

function loadImage(url, element) {
    var spinner = new Spinner();
    var img = new Image();

    img.onload = function() {
        element.appendChild( this );
        spinner.stop();
    }

    spinner.spin( element );
    img.src = url;
}

Die Funktion loadImage erwartet die URL der Grafik-Ressource sowie ein Container Element, z.B. ein DIV um den Spinner zu setzen und danach die Grafik anzuzeigen.

Das schöne an Spin.js ist die Flexibilität der Spinner. Auf der Projektseite lassen sich verschiedene Einstellungen testen und die Optionen werden sogleich als JavaScript zur Verfügung gestellt