How to animate a progress bar in Bootstrap 3?

Question

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

I got the value of the width but console.log(bar_width); returns the width

Answer 1

In Bootstrap 3, it's very easy to animate progress bars. All you need to do, is change the width of your .progress-bar, like this :

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

Just repeat the process whenever your width value needs to be updated, until the process bar reaches 100%.

---

A demo

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

    



Loading completed!

(see also this Fiddle)