How to animate the progress bar in Bootstrap 3?

Question

I'm trying to animate the Bootstrap progress bar, but I'm not sure how to do this.

I got the width value, but console.log(bar_width); returns the width in px , but not % , as shown in the line style="width:90% .

I recreated bootply with code: BootStrap Progress Bar

HTML:

 <!-- Skills Progress Bar --> <section id="skills-pgr"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> <span>HTML/CSS</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%"> <span>Photography</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> <span>CMS</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"> <span>JavaScript/jQuery</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> <span>Photoshop</span> </div> </div> </section> 

JQuery

 // Skills Progress Bar $(function() { $('.progress-bar').each(function() { var bar_width = $(this).css('width'); // returns the css width value var bar_value = $(this).attr('aria-valuenow'); console.log(bar_width); console.log(bar_value); $(this).animate({ value: bar_width }, { duration: 2000, easing: 'easeOutCirc' }); }); }); 

Answer 1

I suppose you want progress to be animated from scratch to the amount specified in aria-valuenow . You are almost there!

• Remove the style attribute from each of the progress bars, as this will instantly put them in the final amount.
• I added % to bar_value so that it is recognized as a percentage. Without a unit, this will be considered as a pixel value.
• The jQuery animate function animate to know which css property to animate. I changed the value in your code example to width to animate the width property
• The easeOutCirc easing function exists only in jQuery UI. I'm not sure if you had this as a resource in your Bootply, but I added it here.

 // Skills Progress Bar $(function() { $('.progress-bar').each(function() { var bar_value = $(this).attr('aria-valuenow') + '%'; $(this).animate({ width: bar_value }, { duration: 2000, easing: 'easeOutCirc' }); }); }); 

 @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'); /* CSS used here will be applied after bootstrap.css */ /* Skills Progess Bar */ section#skills-pgr { padding: 3px 10px 0; } #skills-pgr div.progress { font-weight: bolder; color: #fff; background-color: #f3f3f3; border: 0px none; box-shadow: none; height: 2.5em; } div.progress-bar > span { float: left; position: relative; top: 9px; left: 2%; font-size: 14px; } 

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <!-- Skills Progress Bar --> <section id="skills-pgr"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> <span>HTML/CSS</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"> <span>Photography</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> <span>CMS</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <span>JavaScript/jQuery</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>Photoshop</span> </div> </div> </section> 

Answer 2

In Bootstrap 3, it’s very easy to animate progress bars. All you have to do is change the width of your .progress-bar , for example:

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

Just repeat the process when you need to change the width value until the process bar reaches 100%.

---

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

 <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">Loading completed!</div> 

(see also this script )

Answer 3

You can use the setInterval timer and increase the width at some intervals until the maximum width is reached.

 $('.progress-bar').each(function() { var $bar = $(this); var progress = setInterval(function() { var currWidth = parseInt($bar.attr('aria-valuenow')); var maxWidth = parseInt($bar.attr('aria-valuemax')); //update the progress $bar.width(currWidth+'%'); $bar.attr('aria-valuenow',currWidth+10); //clear timer when max is reach if (currWidth >= maxWidth){ clearInterval(progress); } }, 500); }); 

http://bootply.com/tC8sgQRwDD#