Javascript 页面加载时的 Twitter 引导进度条动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10007212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap progress bar animation on page load
提问by j7nn7k
I have a page with several bootstrap progress bars. Setting their values initially works fine. Though I would like the progress bars to animate/transition to their specific states when a user opens the page.
我有一个带有几个引导程序进度条的页面。设置它们的值最初工作正常。虽然我希望进度条在用户打开页面时动画/转换到它们的特定状态。
This JS works fine, when you click on one of the bars. I would need something like that on an "onload" event of the bar. But the "onload" event is not available for s
当您单击其中一个栏时，此 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+'%');
});
How can I achieve this behavior on page load for all progress bars on a page?
如何在页面加载时为页面上的所有进度条实现此行为？
采纳答案by j7nn7k
While Tats_innit's answer has a nice touch to it, I had to do it a bit differently since I have more than one progress bar on the page.
虽然 Tats_innit 的回答对它有很好的帮助，但由于页面上有多个进度条，所以我不得不做一些不同的事情。
here's my solution:
这是我的解决方案：
JSfiddle: http://jsfiddle.net/vacNJ/
JSfiddle：http: //jsfiddle.net/vacNJ/
HTML (example):
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:
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: Using setInterval() to dynamically recalc the progress is a nice solution, thx mate! ;)
@Tats_innit：使用 setInterval() 动态重新计算进度是一个不错的解决方案，谢谢伙计！;)
EDIT:
编辑：
A friend of mine wrote a nice jquery plugin for custom twitter bootstrap progress bars. Here's a demo: http://minddust.github.com/bootstrap-progressbar/
我的一个朋友为自定义 twitter bootstrap 进度条编写了一个很好的 jquery 插件。这是一个演示：http: //minddust.github.com/bootstrap-progressbar/
Here's the Github repo: https://github.com/minddust/bootstrap-progressbar
这是 Github 存储库：https: //github.com/minddust/bootstrap-progressbar
回答by Tats_innit
EDIT
编辑
- Class name changed from
bartoprogress-barin v3.1.1
- 类名在 v3.1.1 中由
bar改为progress-bar
HTML
HTML
<div class="container">
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>
</div>
</div>?
CSS
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 30px;
width: 400px;
}?
jQueryused in the fiddle below and on the document.ready
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);
});?
Demo
演示
回答by ellabeauty
Bootstrap uses CSS3 transitions so progress bars are automatically animated when you set the width of .bar trough javascript / jQuery.
Bootstrap 使用 CSS3 过渡，因此当您通过 javascript / jQuery 设置 .bar 槽的宽度时，进度条会自动动画。
http://jsfiddle.net/3j5Je/..see?
http://jsfiddle.net/3j5Je/..看到了吗？
回答by kevin
In contribution to ellabeauty's answer. you can also use this dynamic percentage values
为ellabeauty的答案做出贡献。您还可以使用此动态百分比值
$('.bar').css('width', function(){ return ($(this).attr('data-percentage')+'%')});
And probably add custom easing to your css
并且可能为您的 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;
}
回答by Nathalia Xavier
Here's a cross-browser CSS-only solution. Hope it helps!
这是一个跨浏览器的纯 CSS 解决方案。希望能帮助到你！
.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="https://maxcdn.bootstrapcdn.com/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>