Hallo Leute, folgender Code soll erwirken, dass sich eine Progressbar mit zunehmender Länge verlangsamt.
Die Animation der Progressbar funktioniert, allerdings verlangsamt sie sich nicht ab dem Schwellenwert 25. Sie verschnellert sich für einen kurzen Augenblick, um sodann in eine chaotische Anzeige überzugehen.
Weiß jemand Rat?
Hier der JS Code:
hier der HTML-Code
Die Animation der Progressbar funktioniert, allerdings verlangsamt sie sich nicht ab dem Schwellenwert 25. Sie verschnellert sich für einen kurzen Augenblick, um sodann in eine chaotische Anzeige überzugehen.
Weiß jemand Rat?
Hier der JS Code:
Code:
function move() {
var element = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 125);
function frame() {
if (width >= 25)
id = setInterval(frame, 225);
else if (width >= 50)
id = setInterval(frame, 300);
if (width >= 100) {
clearInterval(id);
move();
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
HTML:
<div class="w3-container">
<h3>Connecting IMAP Server...</h3>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:3%">0%</div>
</div>
</div>