How to change color of each progress bar

Question

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:

<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>

and this is my JavaScript function

$( document ).ready(function() {
    $(".progress-bar").each(function (index ) {
          var percent = Math.floor((Math.random() * 37) + 60);
            $(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');
            }
    })
});    

So, I want to make the generated data appear every 5 or 10 minutes. not every page is refreshed, how can i do that based on my script ? Thank you

Fiddle link

Answer 1

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>