jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<div class="progress-wrapper">
    <div id="myBar" class="progressbar" style="height:24px;width:0%">
		<span class="percentage">50 %</span>
    </div>
  </div>

  <p id="myP">Added <span id="demo">0</span> of 10 photos</p>

CSS

.progress-wrapper {
  background-color: #f1f1f1 !important;
  border-radius: 5px;
}

.progressbar {
  background-color: #4CAF50 !important;
  display: table;
  border-radius: 5px;
}

.progressbar-finished-text {
  color: #4CAF50 !important;
}

.percentage {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

JavaScript

function move() {
  var myBar = $('#myBar');  
  var width = 50;

  myBar.css('width', width + '%');
	
    if (width >= 100) {
		$('#myP').addClass('progressbar-finished-text');
		$('#myP').html('Successfully uploaded 10 photos!');
    } else {
      var num = width * 1 / 10;
      $('#demo').html(num);
    }
  }

move();