BeanLoader ist ein einfacher 'Site Preloader', der während des Ladevorgangs einer Website angezeigt wird. Das jQuery Plugin bietet Optionen für die angezeigte Information und den Hintergrund der Animation. Das Plugin kann auch für alle Funktionen einer Website benutzt werden, die Verarbeitungszeit benötigen.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Der Hauptcontainer ist ein Block-Element mit einer beliebigen Klasse oder ID, z. B.:
<div id="sample1"></div>
Im Script wird die Funktion "beanLoader" am Hauptcontainer aufgerufen:
$('#sample1').beanLoader({
});
Soll das Plugin als 'Site Preloader' funktionieren, wird der Hauptcontainer direct nach dem 'body' eingefügt und zusätzlich folgendes Script aufgerufen:
$(window).load(function(){
$('#sample1').delay(1500).fadeOut(1500);
});
Optionen
width: ['n'] ; default: '100%'Gibt die Breite der gesamten 'Preloader Site' an. Alle gültigen CSS-Values können verwendet werden.
height: ['n'] ; default: '100%'Gibt die Höhe der gesamten 'Preloader Site' an. Alle gültigen CSS-Values können verwendet werden.
siteBackground: ['color' | 'image'] ; default: '#fff'Legt den Hintergrund der 'Preloader Site' fest. Es können CSS-Color-Definitionen oder eine Image-URL benutzt werden.
cubeSize: ['n'] ; default: '75px'Bestimmt die Höhe und die Breite der Animation. Alle gültigen CSS-Values können verwendet werden.
cubeColor: [['color1' | 'image1' , 'colorN' | 'imageN']] ; default: ['red' , 'green', 'blue', 'orange' , 'black' , 'magenta' , 'grey']Definiert den Hintergrund der Animation in einem Array. Es können CSS-Color-Definitionen oder Image-URLs benutzt werden. Besteht das Array nur aus einem Wert, wird dieser auf alle Teile der Animation angewendet.
infoText: ['string'] ; default: 'Loading...'Legt den Text unterhalb der Animation fest.
infoTextFont: ['font-family'] ; default: 'inherit'Legt den Font des Textes unterhalb der Animation fest.
infoTextFontSize: ['n'] ; default: '1.2rem'Legt die Schriftgröße des Textes unterhalb der Animation fest. Alle gültigen CSS-Values können verwendet werden.
infoTextColor: ['color'] ; default: '#666'Legt die Schriftfarbe des Textes unterhalb der Animation fest. Alle gültigen CSS-Values können verwendet werden.