Question

在我的页面中，我有一个进度条，它有3个部分：progress-bar-success，progress-bar-warning和progress-bar-danger。我希望此进度条的每个部分都会逐个完成，例如progress-bar-success完成后progress-bar-warning完成，然后最后一个完成。

在我的代码中，我不知道哪里出错，它无法正常工作。

这是我的代码：JSFIDDLE

我该如何解决？

修改

我希望每个进度条都有这种风格：bootply

Answer 1

这些是您原始代码中的主要问题：

您应该更改进度条div的宽度以更新其状态，而不是更改条形元素的宽度。
进度条div不受container1 div宽度的影响，因为进度条浮动（如果您在浏览器中检查容器，您会发现它没有高度）并且它被设置为与.progress类。

以下是您的代码的快速修复版本：http://jsfiddle.net/436Qz/30/

<强> HTML：

<div class="person-info col-xs-12 col-sm-8">
     <div class="progress progress-striped active">
         <div id="1" class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (success)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="2" class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (warning)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="3" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (danger)</span>
         </div>
     </div>
</div>

<强> JS：

$(document).ready(function(){
    var $bar = $('.progress-bar#1');
    var progress = setInterval(function() {
        if ($bar.width()<260) {
            $bar.width($bar.width() + 26);
        }
        $bar.text(Math.floor($bar.width() / 2.6) + "%");
        if ($bar.width()>=260) {
            $bar.parent().removeClass("active");
            if ($bar.is("#3")) {
                return clearInterval(progress);
            }
            $bar = $bar.parent().next().children(".progress-bar");
        }
    }, 520);
});

<强> CSS：

.person-info {
    margin-top: 40px;
    padding-left: 0px !important;
    padding-right: 0px !important;

}
.progress{
    width: 260px;
}

Answer 2

如果您希望使用堆叠的进度条，可以在此处尝试我的示例： http://jsfiddle.net/436Qz/25/

<强> HTML

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 0%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 0%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 0%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

<强>的JavaScript

$(document).ready(function(){

    var progress = setInterval(function() {
        var $successBar = $('.progress-bar-success');
        var $warningBar = $('.progress-bar-warning');
        var $dangerBar = $('.progress-bar-danger');

        if($successBar.width() < 160) {
            $successBar.width($successBar.width()+20);
        } else {
            if($warningBar.width() < 160) {
                $warningBar.width($warningBar.width()+20);
            } else {
                if($dangerBar.width() < 160) {
                    $dangerBar.width($dangerBar.width()+20);
                } else {
                    $dangerBar.width(160);
                }
            }
        }
    }, 100);
});

Bootstrap：进度条加载无法正常工作

2 个答案: