JSFiddle - React, Tailwind, and code Playground

by Herlina

HTML

<div class="col-md-5">
  <p>HTML & CSS</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 50%;"></div>
  </div>
  <p>C#</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
  </div>
  <p>WordPress</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 30%;"></div>
  </div>
  <p>Photoshop</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></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);
             
//        }
    })
});