使用引导程序将栏加载到下一页 - Loading bar to next page with bootstrap

Loading bar to next page with bootstrap

本文关键字：一页加载引导程序 | 更新日期: 2023-09-27

我有一个问题：在我的网站上，按钮"；提交"；开始在有限的时间内加载新页面（以简单形式定义）。这是完美的工作。我想这样做，当你点击"；"开始"；条出现并在定义的时间内开始加载。我想使用一个动画加载助推器：

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

我该怎么做？Javascript？如何？：（

总数据：data-percentage="60"

总秒数：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);
});

演示：http://jsfiddle.net/byybora/XHKkU/4/

加载演示：http://jsfiddle.net/byybora/dbdAx/43/