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。
在贡献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>
