Progress bar

progress bar on bootstrap

by Ristee

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>


  <div id="progress">

  </div>
  <div class="progress">

    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="label">0 (0%)</span>
      <span class="sr-only" id="caption">60% Complete</span>
    </div>

    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="label">0 (0%)</span>
      <span class="sr-only" id="caption">60% Complete</span>
    </div>

    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="label">0 (0%)</span>
      <span class="sr-only" id="caption">60% Complete</span>
    </div>
  </div>
  <input type="button" id="plus" value="ADD">
  <input type="button" id="clear" value="CLEAR">
  <input type="button" id="minus" value="MIN">
</body>

JavaScript

$(document).ready(function() {
  //$('#test').html('<b>WoW!</b>');
  count = 0;
  $('#plus').click(function() {
    add(1);
  });
  $('#clear').click(function() {
    add(0);
    $('.progress-bar').addClass('active');
  });
  $('#minus').click(function() {
    add(-1);
  })
})

function add(cnt, total = 39) {
  //  total = 39;
  var progressbar = 'danger';
  count += cnt;
  if (cnt == 0) {
    count = 0;
    $('.progress-bar').css('width', '0%');
  }
  var totalWidth = count / total * 100;
  var totalWidthR = Math.round(totalWidth * 100) / 100;
  var width = totalWidth;

  //warning = 43.59;
  //success = 74.36;
  warning =45;
  success = 75;
warning = Math.round(Math.floor(warning*total/100)/total*100*100)/100;
  success = Math.round(Math.floor(success*total/100)/total*100*100)/100;
  switch (true) {
    case (totalWidth < warning):
      progressbar = 'danger';
      width = totalWidth;
      break;
    case (totalWidth < success):
      progressbar = 'warning';
      width = totalWidth - warning;
      break;
    case (totalWidth <= 100):
      progressbar = 'success';
      width = totalWidth - success;
      break;
  }
  if (totalWidth <= 100) {
    $('#caption').text(count + ' (' + totalWidthR + '%)');
    $('.progress-bar-' + progressbar + ' .label').text(count + ' (' + totalWidthR + '%)');
    $('.progress-bar-' + progressbar).css('width', width + '%').attr('aria-valuenow', width);
    if (totalWidth == 100) {
      $('.progress-bar').removeClass('active');

    }

  }
}