JSFiddle - React, Tailwind, and code Playground

by byybora

HTML

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%; color: #333" data-percentage="60" data-second="20"></div>
</div>
<a id="clickme">Click</a>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 30px;
    width: 400px;
}

JavaScript

$('#clickme').click(function () {
    var me = $('.progress .bar');
    var perc = me.attr("data-percentage");
    var sec = me.attr("data-second") * 1000;
    var each = sec / perc;
    var current_perc = 0;

    me.css('width', '100%');
    me.text('Loading..');

    setTimeout(function () {
        me.text('0%');
        me.css('width', (current_perc) + '%');
        setTimeout(function () {

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

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

            }, each);
        }, 500);
    }, 2000);
});