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 progress-bar-danger" style="width: 50%;"></div>
  </div>
  <p>Progress bar2</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
  </div>
  <p>Progress bar3</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) {
    //if(index >=0 && index<=1)
    //{
    $(this).animate({
      width: Math.floor((Math.random() * 100) + 1) + "%"
    }, 2500);

    //        }
  })
});