JSFiddle - React, Tailwind, and code Playground

by faltech

HTML

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

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

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

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

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

JavaScript

setTimeout(function(){

        $('.progress .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);