I'm using Bootstrap 3 for this progress bar, as you can see here, there is multiple class for each color such as success(green) warning(yellow) and danger(red).
Here is the HTML for my progress bars:
<div class="col-md-5">
<p>Progress bar1</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-Success" style="width: 50%;"></div>
</div>
<p>Progress bar2</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-Success" style="width: 20%;"></div>
</div>
<p>Progress bar3</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-Success" style="width: 30%;"></div>
</div>
and this is my JavaScript function
$( document ).ready(function() {
$(".progress-bar").each(function (index ) {
//if(index >=0 && index<=1)
//{
var percent = Math.floor((Math.random() * 100) + 1) + "%";
$(this).html(percent);
$(this).animate({width: percent}, 2500);
// }
})
});
So, I'm trying to get the color just by range, like under 79 is going to be red, 80-89 is yellow and above 90 is green.
We are just checking the percent's value and adding class accordingly to the progress-bar.
$( document ).ready(function() {
$(".progress-bar").each(function (index ) {
var percent = Math.floor((Math.random() * 100) + 1);
$(this).html(percent);
$(this).animate({width: percent+"%"}, 2500);
if (percent<79){
$(this).addClass('progress-bar-danger');
} else if(parseInt(percent)<89){
$(this).addClass('progress-bar-warning');
} else{
$(this).addClass('progress-bar-success');
}
})
}); <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-5">
<p>Progress bar1</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
<p>Progress bar2</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
<p>Progress bar3</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
</div>