Loading bar to next page with bootstrap

Question

I have one question: On my website, button "submit" starts loading a new page for a limited time (defined in simple form). That's work perfectly. I want to do so that when you click "start" bar appears and starts loading for defined time. I would like to use an animated loading boostrap:

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

How can I do that? Javascript? How? :(

**Duplicate question:** http://stackoverflow.com/questions/10007212/twitter-bootstrap-progress-bar-animation-on-page-load — Bora, Jul 25 '13 at 09:44
But I don't want to start loading after page load... I want to start loading after click button... — Kamil Basista, Jul 25 '13 at 10:21
It doesn't work... I want this action: I type time => click start => progress bar show time remaining (to finish countdown, taken from the field). — Kamil Basista, Jul 25 '13 at 10:27

Bora · Accepted Answer · 2013-07-25T15:11:18.367

Total Data: data-percentage="60"

Total Second: data-second="60"

HTML

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

JS

$('#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 () {    // Do something after 5 seconds
        var progress = setInterval(function () {
            if (current_perc >= perc) {
                clearInterval(progress);
            } else {
                current_perc += 1;
                me.css('width', (current_perc) + '%');
            }

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

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

Demo: http://jsfiddle.net/byybora/XHKkU/4/

Loading Demo: http://jsfiddle.net/byybora/dbdAx/43/

Loading bar to next page with bootstrap

1 Answers1