Twitter的引导进度栏animation页面加载

我有一个带有几个引导进度条的页面。 设置它们的值最初工作正常。 虽然我希望进度条在用户打开页面时animation/转换到其特定状态。

这JS工作正常,当你点击其中一个酒吧。 我会需要这样的一个“onload”事件的吧。 但“onload”事件不适用于s

//animate progress bars $('.progress .bar').on("click", function(event) { var me = $(this); perc = me.attr("data-percentage"); me.css('width', perc+'%'); }); 

我怎样才能实现页面加载页面上的所有进度栏的这种行为?

编辑

  • 在v3.1.1中,类名称从bar改为progress-bar

HTML

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

CSS

 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container { margin-top: 30px; width: 400px; }​ 

jQuery在下面和document.ready

 $(document).ready(function(){ var progress = setInterval(function() { var $bar = $('.bar'); if ($bar.width()>=400) { clearInterval(progress); $('.progress').removeClass('active'); } else { $bar.width($bar.width()+40); } $bar.text($bar.width()/4 + "%"); }, 800); });​ 

演示

的jsfiddle

更新了JSFiddle

虽然Tats_innit的答案有一个很好的触摸,我不得不做一点点不同,因为我有一个以上的进度栏在页面上。

这是我的解决scheme:

JSfiddle: http : //jsfiddle.net/vacNJ/

HTML(示例):

 <div class="progress progress-success"> <div class="bar" style="float: left; width: 0%; " data-percentage="60"></div> </div> <div class="progress progress-success"> <div class="bar" style="float: left; width: 0%; " data-percentage="50"></div> </div> <div class="progress progress-success"> <div class="bar" style="float: left; width: 0%; " data-percentage="40"></div> </div> 

JavaScript的:

 setTimeout(function(){ $('.progress .bar').each(function() { var me = $(this); var perc = me.attr("data-percentage"); var current_perc = 0; var progress = setInterval(function() { if (current_perc>=perc) { clearInterval(progress); } else { current_perc +=1; me.css('width', (current_perc)+'%'); } me.text((current_perc)+'%'); }, 50); }); },300); 

@Tats_innit:使用setInterval()dynamic重新计算进度是一个不错的解决scheme,thx队友! ;)

编辑:

我的一个朋友写了一个很好的jquery插件的自定义twitter引导进度条。 这是一个演示: http : //minddust.github.com/bootstrap-progressbar/

这里是Github的回购: https : //github.com/minddust/bootstrap-progressbar

Bootstrap使用CSS3转换,所以当你设置.bar通过javascript / jQuery的宽度时,进度条会自动生成animation。

http://jsfiddle.net/3j5Je/ ..见?

在贡献ellabeauty的答案。 你也可以使用这个dynamic的百分比值

 $('.bar').css('width', function(){ return ($(this).attr('data-percentage')+'%')}); 

并可能添加自定义的宽松到您的CSS

 .bar { -webkit-transition: width 2.50s ease !important; -moz-transition: width 2.50s ease !important; -o-transition: width 2.50s ease !important; transition: width 2.50s ease !important; } 

这是一个跨浏览器的纯CSS解决scheme。 希望能帮助到你!

DEMO

 .progress .progress-bar { -moz-animation-name: animateBar; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in; -moz-animation-duration: .4s; -webkit-animation-name: animateBar; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: .4s; animation-name: animateBar; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .4s; } @-moz-keyframes animateBar { 0% {-moz-transform: translateX(-100%);} 100% {-moz-transform: translateX(0);} } @-webkit-keyframes animateBar { 0% {-webkit-transform: translateX(-100%);} 100% {-webkit-transform: translateX(0);} } @keyframes animateBar { 0% {transform: translateX(-100%);} 100% {transform: translateX(0);} } 
 <link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <h3>Progress bar animation on load</h3> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 75%;"></div> </div> </div>