if ($(".hidden.forProgressBar").text() !== "") {
$(".progress-status .progress-item, .new_progress-status .new_progress-item ").each(function () {
var width = "";
//console.log(width);
var id = setInterval(frame, 10);
function frame() {
if (width == $(".hidden.forProgressBar").text()) {
clearInterval(id);
if (width == 0) {
$('.user').addClass('status-act');
}
} else {
width++;
$('.progress-item.js-progressBar, .new_progress-item.js-progressBar').css("width", width + "%");
if (width == 1) {
$('.user').addClass('status-act');
} else if (width == 35) {
$('.user').removeClass('status-act');
}
if (width == 35) {
$('.silver').addClass('status-act');
} else if (width == 65) {
$('.silver').removeClass('status-act');
}
if (width == 65) {
$('.gold').addClass('status-act');
} else if (width == 100) {
$('.gold').removeClass('status-act');
}
if (width == 100) {
$('.vip').addClass('status-act');
}
}
}
});
}
<div class="progress_bar"></div>
.progress_bar {
width: 100%;
height: 10px;
border: 1px solid gray;
border-radius: 50px;
}
let bought = 100;
let vip = 250;
let progressBar = document.querySelector('.progress_bar');
progressBar.style.background = `linear-gradient(to right, rgb(29,170,232) ${bought/vip*100}%, white ${bought/vip*100}%)`