Heute zeige ich euch, wie man ganz schnell und einfach ein animierten Loader baut. Dieses kleine Gimmick macht dafür ganz schön viel her und bringt die Augen jedes Frontend-Developer's zum glänzen.
Zu erst benötigen wir ein div, das als Container für unseren Loader dient. Darin kommt dann unser eigentlicher Loader. Das ganze sieht dann ungefähr so aus:
<div class="loader"> <div class="loading"> </div> </div>
Haben wir unser Grundgerüst für unseren Loader, muss der auch noch ein bisschen 'auf gehübscht' werden.
.loader {
width: 200px;
height: 20px;
margin: 50px auto;
border: 1px solid #DDD;
}
.loading {
width: 0%;
height: 100%;
background: green;
}Um das ganze jetzt ein bisschen Schwung zu geben benötigen wir jQuery. Genau genommen die $.animate() Funktion (Sicher funktioniert das ganze auch noch jQuery, da aber die meisten Websites es sowieso eingebunden haben, kann man es auch gleich benutzen). Diese sagen wir dann, dass es unseren Loader die Breite von 0% auf 100% animieren soll. Das ganze passiert so:
$('.loading').animate({
'width' : '100%'
},
2500
);Mehr braucht es nicht um diesen kleinen aber schönen Effekt zu erzielen.
Dies kann man jetzt auch noch erweitern, sodass der Loader wieder von vorne anfängt sobald er durch ist. Dazu schreiben wir das Javascript in eine eigene Funktion und machen und die Callback Funktion der animate Methode zunutze.
function animateLoader () {
$('.loading').width('0%');
$('.loading').animate({
'width' : '100%'
},
2500,
animateLoader
);
}
animateLoader();Das ganze könnt ihr auch noch mal hier live testen.
So macht das warten doch gleich viel mehr Spaß.