title: How to animate a progress bar in Bootstrap 3?
body: <p>I am trying to animate Bootstrap progress bar, but I'm not sure how to do that.</p>
  
  <p>I got the value of the width but <code>console.log(bar_width);</code> returns the width in <code>px</code> but not <code>%</code> as shown inline <code>style="width:90%</code>.</p>
  
  <p>I recreated a bootply with the code: <a href="http://www.bootply.com/KvaJrh46qK" rel="nofollow">BootStrap Progress Bar</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!-- Skills Progress Bar --&gt;
  &lt;section id="skills-pgr"&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="90"
        aria-valuemin="0" aria-valuemax="100" style="width:90%"&gt;
              &lt;span&gt;HTML/CSS&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="85"
        aria-valuemin="0" aria-valuemax="100" style="width:85%"&gt;
              &lt;span&gt;Photography&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="80"
        aria-valuemin="0" aria-valuemax="100" style="width:80%"&gt;
              &lt;span&gt;CMS&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="75"
        aria-valuemin="0" aria-valuemax="100" style="width:75%"&gt;
              &lt;span&gt;JavaScript/jQuery&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60"
        aria-valuemin="0" aria-valuemax="100" style="width:60%"&gt;
              &lt;span&gt;Photoshop&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>// 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' });
    });
  });
  </code></pre>