How to? Animate a Bootstrap Progress Bar from 0 to 100%

User avatar
Diy
Admin
Admin
Contact:
Location: Philippines
Posts: 162
Joined: Sat Apr 23, 2016 10:32 pm

How to? Animate a Bootstrap Progress Bar from 0 to 100%

Sun Oct 01, 2017 7:54 pm

The bootstrap progress bar is animated by default. When you set the progress value to a new value it will cause the the bar to animate.

This is all it takes to create an animated progress bar :
var $progressBar = $('.progress-bar').css('width', '80%');
This particular code will animate the progress bar from the current value to a value of 80%.

.script

Code: Select all

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
.css
.progress, .alert {
margin: 15px;
}

.alert {
display: none;
}
.html

Code: Select all

<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">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>
Try the DEMO....
DEMO HERE!

Return to “BOOTSTRAP 3.x”

Links

In total there are 2 users online :: 0 registered, 0 hidden and 2 guests
Registered users: No registered users
Most users ever online was 138 on Tue Feb 13, 2018 6:29 pm
Total posts 347
Total topics 253
Total members 45
Our newest member celine mamalaguia
No birthdays today