如何在 Bootstrap 4 中制作进度条动画？

Question

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

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

相关问题：但它适用于 bootstrap 3. 在 jQuery 中，可以通过 attr() 设置属性，但不能通过属性值设置动画（据我所知）。

Answer 1

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

At the time of writing only WebKit/Blink browsers support animations on progress element. We'll animate the stripes on -webkit-progress-value by changing the background position.

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

jQuery

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

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

自定义进度条

更改 class 名称以防止冲突，您将拥有一个相同的进度条，该进度条由 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

Answer 2

在 JavaScript 中，您可以通过创建 recursive function.

来创建自己的自定义动画

在该函数内，您有一个 setTimeout 停止执行该函数特定的毫秒数，直到执行下一帧。在setTimeout里面，函数会调用自己，只要某个条件成立，这个过程就会一直重复下去。当条件变为无效且函数停止调用自身时，动画开始播放。

你可以使用这个技巧来添加动画Bootstrap4的进度条，如下demo所示。对于动画的每一帧，您可以更改进度元素的值 and/or 超时。保持间隔越小，效果越平滑。

一个演示

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）

Answer 3

Bootstrap 4 现在有 progress-bar-animated class。您可以通过编程方式切换此 class 以创建动画进度条效果。例如，使用 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

如何在 Bootstrap 4 中制作进度条动画？

How to animate a progress bar in Bootstrap 4?

javascript

css

jquery

twitter-bootstrap

progress-bar

jQuery

自定义进度条

HTML

CSS

一个演示