JSFiddle - React, Tailwind, and code Playground

by Musale Martin

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-2">
      <h3>First value</h3>
      <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="89" class="progress-bar progress-bar-success" role="progressbar">
            20%
          <span class="sr-only">20% Complete (success)</span>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-2">
      <h3>Second value</h3>
      <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" class="progress-bar progress-bar-info" role="progressbar">
            40%
          <span class="sr-only">40% Complete (info)</span>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-2">
      <h3>Third value</h3>
      <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar progress-bar-warning" role="progressbar">
            60%
          <span class="sr-only">60% Complete (warning)</span>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-2">
      <h3>Fourth value</h3>
      <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" class="progress-bar progress-bar-danger" role="progressbar">
            80%
          <span class="sr-only">80% Complete (danger)</span>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-2">
      <h3>Fifth value</h3>
      <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-primary" role="progressbar">
            100%
          <span class="sr-only">100% Complete (normal)</span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.progress-bar {
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}
h3 {
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}

JavaScript

var bar = $('.progress-bar');
$(function(){
  $(bar).each(function(){
    bar_width = $(this).attr('aria-valuenow');
    $(this).width(bar_width + '%');
  });
});