Animating Bootstrap progress bar width with jQuery
The problem is in default Bootstrap transition effect, which animates any update of the width property.
If you switch it off with supressing the corresponding style, it will work fine, e.g.:
.progress-bar { -webkit-transition: none !important; transition: none !important;}
So, it makes more sense to adjust the transition effect via CSS or jQuery.
.progress-bar { -webkit-transition: width 2.5s ease; transition: width 2.5s ease;}And just change the width value.
$(".progress-bar").css('width', '70%');
IT'S very EASY if uses bootstrap progress bar,
only add attrib aria-valuenow="percent_required%" to div with class "progress-bar" like this:
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57%" aria-valuemin="0" aria-valuemax="57">Next, on script:
<script> $(document).on('ready',function(){ $('.progress .progress-bar').css("width",function() { return $(this).attr("aria-valuenow") + "%"; }) })</script>Reload, Go!