CircletPreloader jQuery Plugin

CircletPreloader ist ein kleines jQuery Plugin das dafür da ist kreisförmige Ladeanimationen anzuzeigen die den Ladezustand diverser HTML DOM Elemente in Prozent abbilden.
Ziel war es mit möglichst wenig KB auszukommen, bei gleichzeitiger Flexibilität was die Möglichkeiten bei der Darstellung der Ladeanimationen angeht. Die minifizierte JavaScript-Datei ist lediglich 2,74KB schwer und kommt ohne andere und/oder externe JavaScript-Bibliotheken aus. Man kann CircletPreloader auch ohne jQuery einsetzen und ist somit komplett unabhängig. Über diverse Parameter lassen sich die Ladeanimationen in großem Umfang individualisieren.
Zur Darstellung der Ladeanimationen wird das HTML5 Canvas Element eingesetzt. Die einzelnen Elemente bestehen dabei aus Vektorgrafiken die „on-the-fly“ gezeichnet werden. Dadurch können die Ladeanimationen ohne Qualitätsverluste auf jede beliebige Größe skaliert werden.

Durch einen Klick auf die folgende Fläche könnt ihr eine Preview starten und eine kleine Auswahl an möglichen Ladeanimationen sehen.

Unterstützte Browser:Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
Bzw. alle Browser die mit dem Canvas Element umgehen können.
Oder schaut einfach auf „Can I use“ nach.

Und so geht’s/How to use:
 
Einfach die JavaScript-Datei „jquery.circletpreloader.min.js“ im head der HTML-Seite einbinden. Falls  jQuery ebenfalls mit im Einsatz ist das Plugin dann darunter einbinden.

Ohne jQuery:
 

Mit jQuery:


  

Für den Fall das wir CircletPreloader in einem div mit der id='myDiv' anzeigen wollen, sähe das wie folgt aus:

Ohne jQuery:
var loader  = new CircletPreloader( document.getElementById( 'myDiv' ) );
Mit jQuery:
$( '#myDiv' ).circletPreloader();

Hiermit wird CircletPreloader mit default settings erzeugt. Wollt ihr CircletPreloader individualisieren, dann müsst ihr noch ein Object mit entsprechenden Properties übergeben. Dazu aber später mehr.
Jetzt geht’s erst einmal darum CircletPreloader mit Informationen zum Ladestand z.B. von einem Bild zu versorgen. Oder anders ausgedrückt, CircletPreloader zum Leben zu erwecken. Fügt dazu den folgenden Code in den progressHandler eures Preloader Scripts ein:

Ohne jQuery (einfach auf die von euch erzeugte Variable/Instanz zugreifen):
loader.setProgress( percent );//percent value 0.00 – 1.00
Mit jQuery:
$( '#myDiv' ).circletPreloader( { progress: percent } );//percent value 0.00 – 1.00

Fertig. Mehr ist nicht nötig!

Wie gesagt, ihr könnt und solltet euren CircletPreloader natürlich anpassen. Dazu müsst ihr einfach ein Object mit diversen Properties übergeben wenn ihr die Ladeanimation erzeugt:

Ohne jQuery:
var loader  = new CircletPreloader( document.getElementById( 'myDiv', loaderProperties ) );
Mit jQuery:
$( '#myDiv' ).circletPreloader( loaderProperties );

„loaderProperties“ ist ein einfaches Object.
var loaderProperties = {};
CircletPreloader arbeitet mit zwei unterschiedlichen Methoden beim Zeichnen.
Zum einen wäre da: 
CircletPreloader.MODE_STROKE 
Mit dieser Methode erzeugt man Ladeanimationen wie diese:

 

 








Und zum anderen:
CircletPreloader.MODE_FILL  
Mit der man Ladeanimationen wie diese hier erzeugen kann:











Für
CircletPreloader.MODE_STROKE
stehe folgende Properties zur Verfügung:
var loaderProperties = {
    mode : CircletPreloader.MODE_STROKE,
    diameterExternal : 40,/*Durchmesser*/
    clockwise : true,/*Richtung*/
    angle : 1.5,/*Start/End-Position Value 0-2*/
    colorExternal : '#000',/*Farbe außen*/
    colorCircle : '#ccc',/*Farbe innen*/
    lineWidthOuter : 9,/*Line width außen*/
    lineWidthInner : 3/*Line width innen*/
};
Und für
CircletPreloader.MODE_STROKE
stehe folgende Properties zur Verfügung:
var loaderProperties = {
    mode : CircletPreloader.MODE_FILL,
    diameterExternal : 100,/*Durchmesser*/
    diameterCircle : 90,/*Durchmesser*/
    diameterInternal : 80,/*Durchmesser*/
    clockwise : true,/*Richtung*/
    angle : 1.5,/*Start/End-Position Value 0-2*/
    colorExternal : '#000',/*Farbe außen*/
    colorCircle : '#f00',/*Farbe außen*/
    colorInternal : '#000'/*Farbe außen*/
};

Wenn ihr CircletPreloader wieder entfernen wollt, z.B. wenn der Ladevorgang beendet ist, dann steht euch die Methode "die" zur Verfügung. Diese ruft ihr wie folgt auf:

Ohne jQuery: 
loader.die();
Mit jQuery:
$( '#myDiv' ).circletPreloader( { die: true } );

Viel Spaß mit CircletPreloader.
Die minifizierte JavaScript-Datei könnt ihr HIER herunterladen.

Download Source