jQuery addClass example

Change class name on click in jQuery

by DefuZe

HTML

<div id="skills">
  <p>C++ development</p>
  <progress value="23" max="100"></progress>

  <p>HTML5</p>
  <div class="value">
    <div class="value-box" style="width: 55%;"></div>
  </div>

  <p>.NET</p>
  <div class="value">
    <div class="value-box" style="width: 74%;"></div>
  </div>

  <p>jQuery</p>
  <div class="value">
    <div class="value-box" style="width: 65%;"></div>
  </div>

  <p>Angular</p>
  <div class="value">
    <div class="value-box" style="width: 40%;"></div>
  </div>
</div>

CSS

.value {
  width: 100%;
  height: 10px;
  background: #ddd;
  margin-bottom: 20px;
}

progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 70%;
  height: 20px;
  background-color: red;
}
progress[value]::-webkit-progress-bar {
  background-color: red;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

.value-box {
  height: 10px;
  background: #36c36e;
}

JavaScript

setInterval(function(){

}, 500);