11/12/2015

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


1 Kommentar:

Lenguyen Myhuong hat gesagt…

Thanks for sharing, nice post!

Chia sẻ các bạn hướng dẫn hay sinh mổ với bài sinh mổ bao lâu thì đặt vòng được cấy que thử thai thì sao với bài cấy que tránh thai bao nhiêu tiền hay việc quan hệ sau khi cấy que thử thai thì sao với bài cấy que tránh thai bao lâu thì quan hệ được tháo vòng với những rắc rối với bài tháo vòng tránh thai có ảnh hưởng gì không hay bài viết ảnh hưởng sau khi cấy vòng tránh thai với bài tháo vòng tránh thai bao lâu thì quan hệ được hay cần kiêng cử những gì, bài hướng dẫn cực đơn giản và nhanh nhất với cách mua hàng trên aliexpress hay chia sẻ bí quyết kinh nghiệm mua hàng với hướng dẫn mua hàng trên aliexpress hay bài viết chia sẻ kinh nghiệm mua hàng cực chất lượng, uy tín với bài cách mua hàng aliexpress nhanh nhất và an toàn nhất hay hướng dẫn các mẹ nấu cháo cá trê cho bé ăn dặm cực thơm ngon hay cháo tôm nấu với rau gì thì ngon với nấu cháo tôm cho bé ăn dặm và món cháo cá lóc thì với bài cháo cá lóc nấu với rau gì cho bé hay chia sẻ bí quyết hay với bài cách đánh thức trẻ sơ sinh day bu cực đơn giản, hiệu quả giúp bé yêu thức ngay hay bệnh đẹn ở trẻ sơ sinh là gì và cách chữa như thế nào cũng như giải đáp thắc mắc trẻ 14 tháng tuổi biết làm những gì phát triển như thế nào hay trẻ sốt phát ban thì sao với bài trẻ bị sốt phát ban tắm lá gì hay việc cho trẻ ngậm núm vú giả có ảnh hưởng gì không với bài có nên cho trẻ ngậm núm giả đảm bảo an toàn cho bé yêu.