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

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

<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 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)

Answer 3

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#