Estoy usando Bootstrap 3 para esta barra de progreso, como puede ver aquí , hay varias clases para cada color, como éxito (verde), advertencia (amarillo) y peligro (rojo).
Aquí está el HTML para mis barras de progreso:
<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>y esta es mi función JavaScript
$( 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); // } }) });Entonces, estoy tratando de obtener el color solo por rango, como por debajo de 79 será rojo, 80-89 es amarillo y por encima de 90 es verde.
Solo estamos verificando el valor del percent y agregando la clase en consecuencia a la barra de progreso.
$( 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>