JSFiddle - React, Tailwind, and code Playground

by Herlina

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>

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 (parseInt(percent)<79){
          $(this).removeClass('progress-bar-danger');
          $(this).removeClass('progress-bar-warning');
          $(this).removeClass('progress-bar-success');
          $(this).addClass('progress-bar-danger');
        } else if(parseInt(percent)<89){
          $(this).removeClass('progress-bar-danger');
          $(this).removeClass('progress-bar-warning');
          $(this).removeClass('progress-bar-success');
          $(this).addClass('progress-bar-warning');
        } else{
          $(this).removeClass('progress-bar-danger');
          $(this).removeClass('progress-bar-warning');
          $(this).removeClass('progress-bar-success');
          $(this).addClass('progress-bar-success');
        }
    }, 5000);
    
    
   })
});