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 zum Thema
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?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.