JSFiddle - React, Tailwind, and code Playground

by bsorrentino

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="progress">
  <div id="p1" class="progress-bar progress-bar-success" style="width: 0%">
    <span class="sr-only"></span>
  </div>
  <div id="p2" class="progress-bar progress-bar-warning progress-bar-striped" style="width: 0%">
    <span class="sr-only"></span>
  </div>
  <div id="p3" class="progress-bar progress-bar-danger" style="width: 0%">
    <span class="sr-only"></span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
    12%
  </div>
</div>

JavaScript

$(function() {
    
    for( var i = 0 ; i < 100; ++i ) {
        
        if( i < 50 ) {
            $('#p1').css( "width", i + "%");
            //$('#p1').text(""+i);
        }
        else if( i >=50  && i <80 ) {
            $('#p2').css( "width", (i-50) + "%");        
            //$('#p2').text(""+i);
        }
        else {
            $('#p3').css( "width", (i-80) + "%");        
            //$('#p3').text(""+i);
        }
    
    }
    
});