JSFiddle - React, Tailwind, and code Playground
HTML
<div id="progress"></div>
<div id="runs"></div>
CSS
#progress {
width: 0%;
background-color: #cfc;
height: 30px;
padding: 5px;
}
JavaScript
var progress = document.getElementById('progress');
var runLogger = document.getElementById('runs');
var runs = 0;
var comeco = new Date().getTime();
var periodical = setInterval(function () {
var start = new Date().getTime();
for (var i = 0; i < 1000; i++) {
for (var x = 0; x < 101; x++) {
progress.innerHTML = x;
progress.style.width = x + '%';
}
}
var end = new Date().getTime();
runLogger.innerHTML = ['Run nr: ' + runs, 'Dur. individual esperada: ' + 500, 'Dur. individual: ' + (end - start), ' Dur.total: ' + (end - comeco), 'Dur. total esperada: ' + (runs * 500)].join('<br />');
if (runs++ > 9) clearInterval(periodical);
}, 500);