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

Posted 2023-03-06

【中文标题】如何在 Bootstrap 3 中为进度条设置动画？

【英文标题】：How to animate a progress bar in Bootstrap 3?

【发布时间】：2015-03-23 06:04:02

【问题描述】：

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

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

我用代码重新创建了一个 bootply：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' );
  );
);

【参考方案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>

【参考方案2】：

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

【讨论】：

这还不错，但动画不如我想使用animate 属性那么流畅。

【参考方案3】：

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

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

只要你的宽度值需要更新，就重复这个过程，直到进程条达到 100%。

---

演示

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>

（另见this Fiddle）