[Bootstrap, Javascript, JQuery] Langsam füllende Progress Bar?
Hallo Leute, ich habe gerade eine Frage zur Bootstrap Progress Bar: Wie bekomme ich es mit Javascript/JQuery hin, dass sich die Progress Bar beim öffnen der Seite in ca. 2 Sekunden von 0% auf 100% auffüllt?
Vielen Dank für eure Hilfe
3 Antworten
Damit es nicht so ganz langweilig ist für deine Besucher könnte man das auch zufällig ansteigen lassen.
Pseudocode:
solange {
var zufall = rand(5,10); // erzeuge eine zufallszahl zwis hen 5 und 10
prozent = prozent + zufall; // addiere zufall zu prozent hinzu
element.val(prozent); // element sollte idealerweise das progress-HTML Element sein
}(prozent >= 100) // sobald prozent größer/gleich 100 ist beende die schleife
Du kannst da noch ein delay einbauen da das oben doch recht schnell ablaufen dürfte.
Die Weite änderst du per Zugriff auf das width Attribut des progress bar.
document.getElementById("progress-bar-id").style.width = "100%";
Damit die Animation langsamer abgespielt wird, verwendet du am besten die transition-duration property von CSS3. Die Art, wie sich der Balken füllen soll (gleichmäßig schnell, linear steigend, eigene Bezier-Kurve) definierst du mit der transition-timing-function property.
(Achtung: Wird von IE9 abwärts nicht unterstützt!)
Mehr Info: http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
#progress-bar-id {
transition-duration: 2s;
transition-timing-function: linear;
}
Mit Hilfe der setTimeout Methode kannst du den Start verzögern.
setTimeout(function(){ document.getElementById("progress-bar-id").style.width = "100%"; }, 2000);
Versuchs mal mit
$('#id').animate({"width":"100%"}, 900);
Natürlich musst du jquery installiert haben und #id auf width: 0; gesetzt haben ;)