jQuery / CSS3 Progressbar

[boxxiebabee]

Servus,

da mir langweilig war, und ich sowieso bald ne Progressbar brauche, hab ich mich mal rangesetzt da ich nichts anständiges gefunden hab.



Demo: (Methode 2)
(Farbe etc. kann alles über CSS geändert werden).

Es gibt 2 Möglichkeiten den Wert zu verändern:

1:

$.jLoader();
$.jLoader.Update(25, 'Testing 25%');

//25: Zu wieviel % soll die Progressbar gefüllt werden?
//Testing 25%: Der Text unter der Progressbar.

2:

	$.jLoader({
		Speed: 30,
		Messages: [[0,'Preparing for the fight'],[25,'Searching for a enemy'],[50,'Enemy found'],[75,'Have an epic fight'],[100,'Die.']], 
		callback: function() {
			alert('Finished!');
		}
	});
//Messages: Hier wird ein 2 dimensionales Array erstellt, jeweils mit der Prozentangabe und dem Status Text. Der Speed (umso kleiner, umso schneller) sollte jedoch etwas verlangsamt werden.
$.jLoader.Update(70);
//Dies würde nun zuerst 'Preparing for the fight', dann 'Searching for a enemy' und zu guter letzt 'Enemy found' anzeigen.

Das ganze funktioniert natürlich auch vise versa. Sprich man kann sich's auch von 100% zu 0% anzeigen lassen.

Optionen:

        var defaults = {  
		   jLoader:		'jLoader',
		   jBar:		'jBar',
		   jPercent:	'jPercentage',
		   jStatus:		'jStatus',
		   Interval:	10,
		   Speed:		20,
		   Messages:	new Array(),
		   callback:	function() {}
		}; 
jLoader: ID vom div jLoader
jBar: ID vom div jBar
jPercent: ID vom div jPercent
jStatus: ID vom div jStatus
(Alle ohne Raute(#)!)
Interval: In welchen Abstand soll die Prozentanzeige / Messages aktuallisiert werden?
Speed: Wieschnell soll die Progressbar den angegebenen Prozentsatz erreichen? (Umso kleiner die Zahl, umso schneller die Progressbar)
Messages: 2 dimensionales Array, siehe Methode 2.
callback: Diese Funktion wird ausgeführt sobald die Progessbar den angegebenen Prozentsatz erreicht hat.

Wer das alles nicht versteht, sollte sich am besten mal die 2 Beispiele im Anhang ansehen, bin nämlich ein miserabler Erklärer

ps. nen Virustotal Bericht stell ich keinen rein, sind ja nur Textdateien

[Sk1dr0w]

Danke ;-)