Twitter Bootstrap页面加载进度条动画

Question

我的页面上有几个Bootstrap进度条。设置它们的值最初是没有问题的。但我想让进度条在用户打开页面时动画/过渡到它们特定的状态。

这个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+'%');
});

如何在页面加载时为页面上的所有进度条实现此行为？

- j7nn7k

Answer 1

编辑

• 类名从bar改为progress-bar，版本为v3.1.1。

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

---

虽然这个解决方案对于像单个文件下载这样的东西很好，但对于像我这样有几个进度条元素的页面来说不起作用。 - j7nn7k

@Alao 这可能有助于理解：https://dev59.com/l13Va4cB1Zd3GeqPEdkC :) - Tats_innit

Answer 2

虽然Tats_innit的答案很不错，但是由于我页面上有多个进度条，所以我必须稍微改变一下做法。

这是我的解决方案：

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() 动态重新计算进度是一个好的解决方案，谢谢啦！ ;)

编辑：

我的朋友写了一个不错的 jQuery 插件，用于自定义 Twitter Bootstrap 进度条。 这里有个演示： http://minddust.github.com/bootstrap-progressbar/

这是 Github 仓库的链接： https://github.com/minddust/bootstrap-progressbar

- j7nn7k

---

它运行良好，但有时在进度条中显示小数值，百分比从进度条中消失了... - Jasper Manickaraj

大家好 - 有人能告诉我如何编辑这个脚本，使其变成十分钟吗？我已经尝试过了，但似乎无法得到一个十分钟的规则 - 有什么想法吗？非常感谢。 - Henry

Answer 3

Bootstrap采用CSS3过渡效果，因此当您通过javascript / jQuery设置.bar的宽度时，进度条会自动动画化。

http://jsfiddle.net/3j5Je/ ..看看吧？

- ellabeauty

Answer 4

补充ellabeauty的答案，你也可以使用这些动态百分比值。

$('.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;
 }

- kevin

Answer 5

这里提供了一个跨浏览器的纯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>

- Nathalia Xavier