Javascript 页面加载时的Twitter引导进度条动画

我有一个带有几个引导进度条的页面。设置它们的值最初效果很好。尽管我希望当用户打开页面时，进度条能够动画化/转换到它们的特定状态

当你点击其中一个条时，这个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+'%');
});

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

EDIT

• 类名在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>​

jQuery用于

文档下方和上方的小提琴中。就绪

$(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：

HTML（示例）：

@Tats_innit：使用setInterval（）动态重新计算进度是一个很好的解决方案，thx mate！；）

编辑：

我的一个朋友为自定义twitter引导进度条编写了一个不错的jquery插件。 下面是一个演示：

以下是Github回购协议：

---

引导使用CSS3转换，因此当您通过javascript/jQuery设置.bar的宽度时，进度条会自动设置动画

---

看到了吗

为爱丽斯的答案做出了贡献。也可以使用此动态百分比值

$('.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的唯一解决方案。希望有帮助

.progress.进度条{
-moz动画名称：animateBar；
-moz动画迭代次数：1；
-moz动画计时功能：轻松进入；
-moz动画持续时间：.4s；
-webkit动画名称：animateBar；
-webkit动画迭代计数：1；
-webkit动画计时功能：轻松；
-webkit动画持续时间：.4s；
动画名称：animateBar；
动画迭代次数：1；
动画计时功能：轻松自如；
动画持续时间：.4s；
}
@-moz关键帧动画库{
0%{-moz变换：translateX（-100%）；}
100%{moz变换：translateX（0）；}
}
@-webkit关键帧动画库{
0%{-webkit转换：translateX（-100%）；}
100%{-webkit转换：translateX（0）；}
}
@关键帧动画库{
0%{transform:translateX（-100%）；}
100%{transform:translateX（0）；}
}

加载进度条动画

虽然此解决方案适用于单个文件下载之类的内容，但它不适用于具有多个进度条元素的页面，如我的情况。@Alao这可能有助于理解：

：）

它工作得很好。。但有时它会在progressbar中显示十进制值，%会从progressbar中消失……嗨，有人能告诉我如何编辑这个脚本，使其保持十分钟吗？我已经玩了很多次了，但我似乎没有一个十分钟的规则——有什么想法吗？非常感谢

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);

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

.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;
 }