JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="col-xs-12 col-sm-12 progress-container">
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-warning" style="width:0%">
          
           <h4 class="modal-title" id="myModalLabel"><span id="demo"></span>%</h4>
          
        </div>
    </div>
</div>

CSS

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

JavaScript

$(".progress-bar").animate({
    width: "100%"
},{
    duration: 3000,
   progress: function(_, progr) {
      $('#demo').text( Math.round(100 * progr));          
   }
});