twitter-bootstrap 如何在 Bootstrap 3 中为进度条设置动画？

How to animate a progress bar in Bootstrap 3?

提问by TheAmazingKnight

I am trying to animate Bootstrap progress bar, but I'm not sure how to do that.

我正在尝试为 Bootstrap 进度条设置动画，但我不知道该怎么做。

I got the value of the width but console.log(bar_width);returns the width in pxbut not %as shown inline style="width:90%.

我得到了宽度的值，但console.log(bar_width);返回了宽度 inpx但不像%inline 所示style="width:90%。

I recreated a bootply with the code: BootStrap Progress Bar

我用代码重新创建了一个引导程序：BootStrap Progress Bar

HTML:

HTML：

<!-- Skills Progress Bar -->
<section id="skills-pgr">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="90"
      aria-valuemin="0" aria-valuemax="100" style="width:90%">
            <span>HTML/CSS</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="85"
      aria-valuemin="0" aria-valuemax="100" style="width:85%">
            <span>Photography</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="80"
      aria-valuemin="0" aria-valuemax="100" style="width:80%">
            <span>CMS</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="75"
      aria-valuemin="0" aria-valuemax="100" style="width:75%">
            <span>JavaScript/jQuery</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="width:60%">
            <span>Photoshop</span>
        </div>
    </div>
</section>

jQuery:

jQuery：

// Skills Progress Bar
$(function() {
  $('.progress-bar').each(function() {
      var bar_width = $(this).css('width'); // returns the css width value
      var bar_value = $(this).attr('aria-valuenow');
      console.log(bar_width);
      console.log(bar_value);
      $(this).animate({ value: bar_width }, { duration: 2000, easing: 'easeOutCirc' });
  });
});

采纳答案by ckuijjer

I'm assuming you want the progress to be animated from zero to the amount specified in aria-valuenow. You are almost there!

我假设您希望进度从零动画到aria-valuenow. 你快到了！

1. Remove the styleattribute from each of the progress bars as that will instantly put them at the final amount.
2. I've added %to the bar_valueto make it be recognized as a percentage. Without a unit it will be seen as a pixel value.
3. The jQuery animatefunction needs to know which css property to animate. I've changed valuein your code example into widthto animate the widthproperty
4. The easeOutCirceasing function exists only in jQuery UI. I'm not sure if you had that as a resource in your Bootply, but I've added it here.

1. style从每个进度条中删除属性，因为这会立即将它们置于最终数量。
2. 我已将其添加%到 中bar_value以使其被识别为百分比。如果没有单位，它将被视为像素值。
3. jQueryanimate函数需要知道要为哪个 css 属性设置动画。我已value在您的代码示例中更改为width为该width属性设置动画
4. 在easeOutCirc宽松的功能只存在于jQuery用户界面。我不确定您是否将其作为 Bootply 中的资源，但我已将其添加到此处。

// Skills Progress Bar
$(function() {
  $('.progress-bar').each(function() {
    var bar_value = $(this).attr('aria-valuenow') + '%';                
    $(this).animate({ width: bar_value }, { duration: 2000, easing: 'easeOutCirc' });
  });
});

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

/* CSS used here will be applied after bootstrap.css */

/* Skills Progess Bar */

section#skills-pgr {
  padding: 3px 10px 0;
}
#skills-pgr div.progress {
  font-weight: bolder;
  color: #fff;
  background-color: #f3f3f3;
  border: 0px none;
  box-shadow: none;
  height: 2.5em;
}
div.progress-bar > span {
  float: left;
  position: relative;
  top: 9px;
  left: 2%;
  font-size: 14px;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<!-- Skills Progress Bar -->
<section id="skills-pgr">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
      <span>HTML/CSS</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
      <span>Photography</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
      <span>CMS</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <span>JavaScript/jQuery</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span>Photoshop</span>
    </div>
  </div>
</section>

回答by John Slegers

In Bootstrap 3, it's very easy to animate progress bars. All you need to do, is change the width of your .progress-bar, like this :

在 Bootstrap 3 中，动画进度条非常容易。你需要做的就是改变你的宽度.progress-bar，像这样：

$('.progress-bar').css('width', '80%');

Just repeat the process whenever your width value needs to be updated, until the process bar reaches 100%.

只要您的宽度值需要更新，只需重复该过程，直到过程栏达到 100%。

---

---

A demo

一个演示

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second

.progress, .alert {
    margin: 15px;
}

.alert {
    display: none;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Loading completed!</div>

(see also this Fiddle)

（另见这个小提琴）

回答by Zim

You could use setInterval timer and increase the width at some interval until it reaches a max width..

您可以使用 setInterval 计时器并以某个时间间隔增加宽度，直到达到最大宽度。

$('.progress-bar').each(function() {
    var $bar = $(this);
    var progress = setInterval(function() {

      var currWidth = parseInt($bar.attr('aria-valuenow'));
      var maxWidth = parseInt($bar.attr('aria-valuemax'));

      //update the progress
        $bar.width(currWidth+'%');
        $bar.attr('aria-valuenow',currWidth+10);

      //clear timer when max is reach
      if (currWidth >= maxWidth){
        clearInterval(progress);
      }

    }, 500);
});

http://bootply.com/tC8sgQRwDD#

http://bootply.com/tC8sgQRwDD#