JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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)
        //{
        	var percent = Math.floor((Math.random() * 100) + 1) + "%";
          	$(this).html(percent);
            $(this).animate({width: percent}, 2500);
             
//        }
    })
});