jQuery addClass example

Change class name on click in jQuery

by Noir Noir

HTML

<div class="progress-line">
  <div class="fill" style="width: 20%"></div>
</div>

CSS

.progress-line {
  height: 10px;
  width: 200px;
  background: #ddd;
}

.progress-line .fill {
  height: 100%;
  width: 0%;
  background: green;
}

JavaScript

var hFrom = 10,
		hTo = 22,
    hNow = 14,
    percent = 100 * (hNow - hFrom) / (hTo - hFrom);
    
$('.progress-line .fill').width(percent + '%');