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 in px but not % as shown inline style="width:90%.
I recreated a bootply with the 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' });
});
});
I'm assuming you want the progress to be animated from zero to the amount specified in aria-valuenow. You are almost there!
- Remove the
style attribute from each of the progress bars as that will instantly put them at the final amount.
- I've added
% to the bar_value to make it be recognized as a percentage. Without a unit it will be seen as a pixel value.
- The jQuery
animate function needs to know which css property to animate. I've changed value in your code example into width to animate the width property
- The
easeOutCirc easing function exists only in jQuery UI. I'm not sure if you had that as a resource in your Bootply, but I've 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>
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;
}
<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 Fiddle)
You could use setInterval timer and increase the width at some interval until it reaches a max width..
$('.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#
