jQuery addClass example

Change class name on click in jQuery

by holden321

HTML

<div class="wrapper-spinner container flex-column">
  <div class="loader-spinner-progress">
    <div class="loader-inner"></div>
  </div>          
</div>

CSS

.wrapper-spinner {
	height: 100vh;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loader-spinner-progress {
	position: relative;
	display: block;
    transform: rotate(180deg);
	width: 70px;
	height: 71px;
	border: 4px solid #C3CCD7;
	border-radius: 7px;
	overflow: hidden;
}



.loader-inner {
		position: relative;
		display: block;
    	width: 100%;
		background-color: #C3CCD7;
  height: 0;
  transition: height 0.25s ease-in;
	}

JavaScript

// эмуляция текущего состояния для демонстрации
var currentPerc = 0;
setInterval(function () {
	currentPerc += 10;
  currentPerc = currentPerc > 100 ? 0:currentPerc;
	loader(currentPerc);
}, 500);

function loader(perc) {
	$(".loader-inner").height(perc + "%");
}