Question

我正在试图为Bootstrap进度条制作动画，但我不知道该怎么做。

我得到宽度的值，但console.log(bar_width);返回px但不是%的宽度，如内联style="width:90%所示。

重新创建了一个bootply

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

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

Answer 1

我假设您希望将进度从零动画到aria-valuenow中指定的数量。你快到了！

从每个进度条中删除style属性，因为它会立即将它们置于最终金额。
我已将%添加到bar_value，以便将其识别为百分比。没有单位，它将被视为像素值。
jQuery animate函数需要知道要设置动画的css属性。我已将代码示例中的value更改为width以设置width属性的动画
easeOutCirc缓动函数仅存在于jQuery UI中。我不确定你是否将它作为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>

Answer 2

在Bootstrap 3中，很容易为进度条设置动画。您需要做的就是更改.progress-bar的宽度，如下所示：

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

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

（另见this Fiddle）

Answer 3

您可以使用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#

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

3 个答案:

演示