Hallo zusammen, ich hoffe ihr seid gut durch die Karnevals-Zeit gekommen 😉 Um nicht sofort bei 110% zu starten möchte ich euch Heute ein winziges Skript vorstellen, das uns (ähnlich wie PACE) einen animierten Ladebalken auf den Bildschirm zaubert.

Erinnert ihr euch an den Eintrag zum Javascript „Ajax-Indikator“ PACE? Dieses Skript stellt euch eine automatisierte Lade-Animation für Ajax-Requests dar und bringt (inzwischen) 14 Themes mit! Ich hatte es auch selbst mal ausprobiert (siehe Blog-Post), war aber nicht so sehr davon überzeugt weil der versprochene Automatismus nicht funktioniert hat.

Zurück zur alternative zu PACE

Nanobar.js beschränkt sich, im Gegensatz zu den 14 PACE Templates, auf die absoluten Basics und bietet lediglich den schmalen Ladebalken am oberen Bildschirmrand. Das schöne: es bietet eine sehr einfache API, ist Framework-unabhängig und verflucht klein. Die Nanobar braucht nur drei Methoden und bietet drei (optionale) Optionen:

// Example from http://nanobar.micronube.com/

var options = {
   bg: '#acf',

   // left target blank for global nanobar
   target: document.getElementById('myDivId'),

   // id for new nanobar
   id: 'mynano'
};

var nanobar = new Nanobar( options );

// Move the bar.
nanobar.go( 30 ); // size bar 30%

// Reset progress (back to 0%).
nanobar.init();

// Fade out progress bar (will not move it to 100%).
nanobar.finish();

Der kommentierte und unkomprimierte Quellcode kommt auf etwa 113 Zeilen – komprimiert bringt das Skript lediglich 725 Byte auf die Waage – nicht schlecht!

Besondere Merkmale?

Ein Feature finde ich relativ interessant: Durch die target Option ist es möglich den Ladebalken an ein vorhandenes DOM Element zu heften. Das könnte z.B. beim nachladen einzelner Content-Elemente oder Widgets zum Einsatz kommen! Die Nanobar ist außerdem auf github zu finden.

Da zum animieren CSS3 Features (CSS transitions) einsetzt, wird es in älteren Browsern ggf. zu (Darstellungs-) Problemen kommen. „Ältere“ Browser bezieht sich auf die folgenden:

• IE < 10
• Chrome < 26
• Firefox < 16
• Safari < 6.1
• Opera < 12.1

Mit diesen Worten verabschiede ich mich auch schon für Heute und wünsche euch eine angenehme Restwoche!
Übrigens: wird hier wer nächste Woche auf der CeBIT unterwegs sein?