I have this timeline
<div class="timeline-wrapper">
<div class="timeline-item">
<div class="timeline-loaded" style="width: 100%"></div>
</div>
<div class="timeline-item">
<div class="timeline-loaded" style="width: 100%"></div>
</div>
<div class="timeline-item">
<div class="timeline-loaded" style="width: 83%"></div>
</div>
</div>
So the last item goes up from to 84, 85 etc. but when i reset the timeline i want to have all the items style width: 0% but then it has the transition animation so u see that it goes to 0 but it needs to go to 0 instantly and smoothly fill from 0 to 100%.
Any help is welcome!
By reading your question what I got is you need some progressbar. You can refer to this. https://www.w3schools.com/howto/howto_js_progressbar.asp
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
Basically it will modify width of your class. If you need more help on this please elaborate your requirement more with jsfiddle or any same.