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

I'm assuming you want the progress to be animated from zero to the amount specified in aria-valuenow. You are almost there!

1. Remove the style attribute from each of the progress bars as that will instantly put them at the final amount.
2. 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.
3. 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
4. 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;
}

  

    

      HTML/CSS
    
  
  

    

      Photography
    
  
  

    

      CMS
    
  
  

    

      JavaScript/jQuery
    
  
  

    

      Photoshop