JSFiddle - React, Tailwind, and code Playground

by Herlina

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col-md-5">
  <p>Progress 1</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 50%;"></div>
  </div>
  <p>Progress 2</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
  </div>
  <p>Progress 3</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 30%;"></div>
  </div>
</div>

JavaScript

$( document ).ready(function() {
    $(".progress-bar").each(function (index ) {
    setInterval(() => {
          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)<85){
              $(this).addClass('progress-bar-warning');
            } else{
              $(this).addClass('progress-bar-success');
            }
            }, 10000);
    })
});