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

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

Answer 1

修改

在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~~

Updated JSFiddle

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（）动态重新计算进度是一个很好的解决方案，顺便说一下！ ;）

修改

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

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

Answer 3

Bootstrap使用CSS3过渡，因此当你通过javascript / jQuery设置.bar的宽度时，进度条会自动生成动画。

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

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

Answer 5

这是一个跨浏览器的CSS解决方案。希望它有所帮助！

DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: