使用引导程序将条加载到下一页
Posted
技术标签:
【中文标题】使用引导程序将条加载到下一页【英文标题】: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"
<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/
【讨论】:
以上是关于使用引导程序将条加载到下一页的主要内容,如果未能解决你的问题,请参考以下文章
我在应用程序加载而不是图像时开发启动视频。并且还使用 ios 中的推送视图控制器导航到下一页