JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress progress-success">
        <div class="bar" style="float: left; width: 0%; " data-percentage="100"></div>
    </div>

<div class="progress progress-danger">
  <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-percentage="100" style="width: 0%">
  </div>
</div>

<div class="progress progress-striped active">
  <div class="bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
    data-percentage="100" style="width: 0">
  </div>
</div>

CSS

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');

.container {
    margin-top: 30px;
    width: 400px;
}

JavaScript

setTimeout(function(){

        $('.bar').each(function() {
            var me = $(this);
            var perc = me.attr("data-percentage");

            //TODO: left and right text handling

            var current_perc = 0;

            var progress = setInterval(function() {
                if (current_perc>=perc) {
                    clearInterval(progress);
                } else {
                    current_perc +=1;
                    me.css('width', (current_perc)+'%');
                }

                me.text((current_perc)+'%');

            }, 50);

        });

    },300);