JSFiddle - React, Tailwind, and code Playground
HTML
<div id="progressBar" class="progress-bar"></div>
CSS
.progress-bar {
width: 0;
height: 20px;
background: red;
}
JavaScript
var valueX = 1000; // некое абстрактное пороговое значение
var valueCurrent = 0;
var progressBar = document.getElementById("progressBar");
// через определенные промежутки времени увеличиваем ширину
setInterval(function() {
if (valueCurrent <= valueX) {
var step = 20;
var per = step / valueX;
valueCurrent += step;
progressBar.style.width += per * 100 + '%';
// в консоли выводится 2%
console.log(progressBar.style.width);
}
}, 3000);