[英]Twitter-Bootstrap progress bar 100% every x amount of seconds
Would it be possible to make a Bootstrap progress bar go to 100% every say 5 seconds 每5秒说一次Bootstrap进度条是否有可能达到100%
<div class="progress progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>
The progress bar is filled via the width style, so above would put It at 40% complete 进度栏通过宽度样式填充,因此上面将其设置为40%完成
How would I make it smoothly load up-to 100% in 5seconds, then reset back to 0 and start again, repeatedly? 如何使它在5秒钟内平稳加载到100%,然后重设为0,然后再次重复启动?
Thanks. 谢谢。
In this answer I modified @Blender's approach a little to run forever. 在此答案中,我对@Blender的方法进行了一些修改以使其永久运行。
For this I'm using complete
argument of animate
function. 为此,我使用了animate
函数的complete
参数。
http://jsfiddle.net/xXM2z/490/ http://jsfiddle.net/xXM2z/490/
full JS code: 完整的JS代码:
$(document).ready(function(){
animateScroll();
});
function animateScroll()
{
$('.bar').animate({
width: '100%'
}, {
duration: 5000,
easing: 'linear',
complete:function(){ $(this).css("width","0%");
}
});
animateScroll();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.