Search code examples
phploading

Loading bar to next page with bootstrap

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? :(

Solution

  • 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/