Quiero usar cuatro progressbar y animarlos de tal forma que la barra se llene desde un valor inicial de 1 hasta un valor final marcado por el atributo value, pero tal y como lo tengo la barra no se llena.
Codigo HTML
<div class="nivel-lenguaje">
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
</div>
Codigo JavaScript
window.onload = function () {
animateprogress();
}
function animateprogress() {
var elem = document.getElementsByClassName("valor");
var value = 1;
for (let i = 0; i < elem.length; i++) {
var id = setInterval(frame, 10);
function frame() {
if (value >= elem[i].getAttribute('value')) {
clearInterval(id);
} else {
value++;
elem[i].value = value;
}
}
value = 1;
}
}
-- MODIFICACION --
Modifique la función de javascript y ahora hace la animación, sin embargo no se detiene cuando llega al valor indicado en value.
Codigo JavaScript
window.onload = function () {
var elem = document.getElementsByClassName('valor');
for (let i = 0; i < elem.length; i++) {
animateprogress(i);
}
}
function animateprogress (i) {
var elem = document.getElementsByClassName('valor');
var value = 1;
var id = setInterval(frame, 10);
function frame() {
if (value >= elem[i].getAttribute('value') + 1) {
clearInterval(id);
} else {
value++;
elem[i].value = value;
}
}
}