使用引导程序将条加载到下一页

Posted 2023-02-25

【中文标题】使用引导程序将条加载到下一页

【英文标题】：Loading bar to next page with bootstrap

【发布时间】：2013-07-25 09:41:34

【问题描述】：

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

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

我该怎么做？ javascript？如何？ :(

提前致谢。

【问题讨论】：

重复问题： ***.com/questions/10007212/…

但是我不想在页面加载后开始加载...我想在点击按钮后开始加载...

将 each 更改为 click ;))

它不起作用...我想要这个动作：我输入时间 => 点击开始 => 进度条显示剩余时间（完成倒计时，取自现场）。

【参考方案1】：

总数据： 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/