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

<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 ) {
          var percent = Math.floor((Math.random() * 39) + 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');
            }
    })
});