Bootstrap Animated Progress Bars

Bootstrap Animated Progress Bars with separated text

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
  <h2>Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar-txt">
      70%
      </div>
    </div>
  </div>
          <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
</div>

CSS

body {
    padding:20px;
}

.progress-bar-txt{
 position:absolute;
 left:50%;
}

JavaScript

$('.progress-bar').each(function() {
  var min = $(this).attr('aria-valuemin');
  var max = $(this).attr('aria-valuemax');
  var now = $(this).attr('aria-valuenow');
  var siz = (now-min)*100/(max-min);
  $(this).css('width', siz+'%');
});