JSFiddle - React, Tailwind, and code Playground
HTML
<div class="progress-bar">
<div>
</div>
</div>
CSS
.progress-bar {
width: 300px;
height: 35px;
border: 1px solid #2c3e50;
}
.progress-bar div {
width: 0%;
height: 100%;
background-color: #34495e;
}
JavaScript
$(function() {
var nMax = 99;
var nWidth = 0;
var nSpeed = 100;
var $progressBar = $('.progress-bar div');
var oInterval = window.setInterval(function() {
nWidth += (nMax - nWidth) / 100;
$progressBar.stop().animate({
width: nWidth + '%'
}, nSpeed);
if(Math.round(nWidth) === nMax) window.clearInterval(oInterval);
}, nSpeed);
});