JSFiddle - React, Tailwind, and code Playground
HTML
<div class="elapsed-container">
<div class="elapsed"></div>
</div>
CSS
.elapsed-container{
width: 100%;
height: 10px;
background: grey;
}
.elapsed{
left: 0;
width: 0;
height: 100%;
background: red;
transition: width 33ms linear;
}
JavaScript
var percentDone = 0;
var elapsed = document.getElementsByClassName("elapsed")[0];
setProgress = function() {
percentDone++;
if( percentDone<=100 ) {
elapsed.style.width = percentDone + "%";
};
};
elapsed.addEventListener('transitionend', setProgress);
setProgress();