如何在Bootstrap 3中为进度栏设置动画？ [英] How to animate a progress bar in Bootstrap 3?

问题描述

我正在尝试给Bootstrap进度栏设置动画，但是我不确定该怎么做。

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

我得到了width的值，但是 console.log（bar_width）; 返回 px 的宽度，但不返回％的宽度如内联 style = width：90％所示。

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

我用以下代码重新创建了bootply： BootStrap进度栏

I recreated a bootply with the code: BootStrap Progress Bar

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

推荐答案

我假设您希望对进度进行动画处理从零到 aria-valuenow 中指定的金额。

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

1. 从每个进度栏中删除 style 属性


2. 我已将％添加到 bar_value 使其以百分比表示。没有单位，它将被视为像素值。


3. jQuery animate 函数需要知道要对哪个css属性进行动画处理。我已将代码示例中的 value 更改为 width 来为 width 属性


4. easeOutCirc 缓动函数仅在jQuery UI中存在。我不确定您是否在Bootply中将其作为资源，但已在此处添加。

1. Remove the style attribute from each of the progress bars as that will instantly put them at the final amount.
2. I've added % to the bar_value to make it be recognized as a percentage. Without a unit it will be seen as a pixel value.
3. The jQuery animate function needs to know which css property to animate. I've changed value in your code example into width to animate the width property
4. The easeOutCirc easing 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.

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

这篇关于如何在Bootstrap 3中为进度栏设置动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！