How to animate a progress bar in Bootstrap 4?

Question

We used to have the progress percentage defined as a CSS attribute in Bootstrap 3. The new Bootstrap 4 version has a <progress> element and a value attribute.

With version 3, it was possible to use jQuery css animation to animate the progress bar to a given percentage. HTML element attributes cannot be "animated". Question is: how can we animate the percentage of a bootstrap 4 progress bar? I guess it is possible, otherwise it would be a big backstep from boostrap 3.

Related question: How to animate a progress bar in Bootstrap 3? but it is for bootstrap 3. In jQuery, attributes can be set by attr() but it is not possible to animate by an attribute value (AFAIK).

Answer 1

In JavaScript, you can create your own custom animations by creating a recursive function.

Inside that function, you have a setTimeout that stops execution of the function for a specific number of milliseconds until the next frame is to be executed. Inside the setTimeout, function calls itself, and this process keeps repeating as long as a certain condition is valid. The animation shops when the condition becomes invalid and the function stops calling itself.

You can use this technique to add animation Bootstrap 4's progress bar, as shown in the demo blow. With each frame of the animation, you can change the value of your progress element and/or your timeout. The smaller you keep your intervals, the smoother the effect will be.

---

A demo

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>

(see also this Fiddle)

Answer 2

Bootstrap 4 progress bars use the HTML5 <progress></progress> element. By default, the progress element doesn't animate and there currently isn't a good cross browser way to make them animate using CSS animations. 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.

This requires us to either use JavaScript, or manually style our progress bar using <div> elements. This will probably change since Bootstrap 4 is currently in the alpha stage. The relevant issue is twbs/bootstrap#17148

jQuery

This can be done through jQuery the way you commented above.

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

Custom Progress Bar

Change the class names to prevent collisions and you will have an identical progress bar which is animated by CSS animations.

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