【问题标题】：How to animate a progress bar in Bootstrap 4?如何在 Bootstrap 4 中为进度条设置动画？
【发布时间】：2016-02-24 18:57:24
【问题描述】：

我们曾经在 Bootstrap 3 中将进度百分比定义为 CSS 属性。新的 Bootstrap 4 版本has a <progress> element and a value attribute。

在版本 3 中，可以使用 jQuery css 动画将进度条设置为给定百分比。 HTML 元素属性不能被“动画化”。问题是：我们如何为 bootstrap 4 进度条的百分比设置动画？我想这是可能的，否则这将是 boostrap 3 的一大退步。

相关问题：How to animate a progress bar in Bootstrap 3? 但它适用于引导程序 3。在 jQuery 中，可以通过 attr() 设置属性，但无法通过属性值 (AFAIK) 设置动画。

【问题讨论】：

这是一个转储问题。意识到我仍然可以使用 css 宽度而不是值。 $("#progressbar").animate({ "width": data["percent"]+"%" }, { duration: 500, easing: 'linear' });

标签： javascript jquery css twitter-bootstrap progress-bar

【解决方案1】：

在 JavaScript 中，您可以通过创建 recursive function 来创建自己的自定义动画。

在该函数内部，您有一个setTimeout，它会在特定的毫秒数内停止函数的执行，直到执行下一帧。在setTimeout 内部，函数调用自身，只要某个条件有效，这个过程就会不断重复。当条件变为无效并且函数停止调用自身时，动画商店。

您可以使用此技术添加动画 Bootstrap 4 的进度条，如演示中所示。对于动画的每一帧，您可以更改进度元素的值和/或超时。间隔越小，效果就越平滑。

演示

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

var progress = 0;      // initial value of your progress bar
var timeout = 10;      // number of milliseconds between each frame
var increment = .5;    // increment for each frame
var maxprogress = 110; // when to leave stop running the animation

function animate() {
    setTimeout(function () {
        progress += increment;
        if(progress < maxprogress) {
            $progressBar.attr('value', progress);
            animate();
        } else {
            $progressBar.css('display', 'none');
            $alert.css('display', 'block');
        }
    }, timeout);
};
animate();

.pad {
    padding: 15px;
}

.alert {
    display: none;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="pad">
    <progress class="progress" value="0" max="100">0%</progress>
    <div class="alert alert-success" role="alert">Loading completed!</div>
</div>

（另见this Fiddle）

【讨论】：

@WayBehind：谢谢！非常感谢您的评论:-)
非常好。这应该是公认的答案。

【解决方案2】：

Bootstrap 4 进度条使用 HTML5 <progress></progress> 元素。默认情况下，进度元素不动画，目前没有一个好的跨浏览器方法可以使用 CSS 动画使它们动画。 Chris Coyer's site CSS Tricks talks about this.

在撰写本文时，只有 WebKit/Blink 浏览器支持进度元素上的动画。我们将通过更改背景位置为 -webkit-progress-value 上的条纹设置动画。

这要求我们要么使用 JavaScript，要么使用 <div> 元素手动设置进度条的样式。这可能会改变，因为 Bootstrap 4 目前处于 alpha 阶段。相关问题是twbs/bootstrap#17148

jQuery

这可以通过你上面评论的方式通过 jQuery 来完成。

var percentage = 20;
$("#progressbar")
  .animate({
    "value": percent + "%"
  }, {
    duration: 600,
    easing: 'linear'
  });

自定义进度条

更改类名以防止冲突，您将拥有一个由 CSS 动画动画的相同进度条。

HTML

<div class="progress">
  <div class="progress-bar" style="width: 60%;">
  </div>
</div>

CSS

.progress-bar {
    height: 100%;
    width: 0;
    color: #fff;
    background-color: #337ab7;
    transition: width .6s ease;
}

.progress {
    height: 1em;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

Fiddle

【讨论】：

Bootstrap 4 已停止使用 HTML5 ，因为它们合并了拉取请求 21473。

【解决方案3】：

Bootstrap 4 现在具有 progress-bar-animated 类。您可以以编程方式切换此类以创建动画进度条效果。例如，使用 jQuery：

$('#btn').click(function() {

  var timerId, percent;

  // reset progress bar
  percent = 0;
  $('#btn').attr('disabled', true);
  $('#progress').css('width', '0px').addClass('progress-bar-animated active');
  $('#progress').html('<span class="spinner-border spinner-border-sm ml-auto"></span>');

  timerId = setInterval(function() {

    // increment progress bar
    percent += 5;
    $('#progress').css('width', percent + '%');

    if (percent >= 100) {
      clearInterval(timerId);
      $('#btn').attr('disabled', false);
      $('#progress').removeClass('progress-bar-animated progress-bar-striped active').html('Complete');
    }
  }, 300);
});

Demo

【讨论】：