Animated percentage loader using html css and js

on
<html>
<head>
<title>loader</title>
<style>
body{
display:flex;
align-content:center;
justify-content:center;
height:100vh;
padding-top:165px;
font-family:sans-serif;
background:black;
overflow:hidden;
}

.outer{
height:300px;
width:300px;
background:linear-gradient(135deg,green 0%,white 5%,green 15%,blue 50%,red 100%);
border-radius:50%;
}

.outer.active-loader{
animation:rotate 2s ease infinite;
}

@keyframes rotate{
to{transform:rotate(360deg);}
}

.outer.active-loader-2{
animation:rotate2 3s ease;
}
@keyframes rotate{
to{transform:rotate(360deg);}
}

.inner{
position:absolute;
width:275px;
height:275px;
text-align:center;
line-height:275px;
background:#240f52;
border-radius:50%;
margin-top:12px;
cursor:default;

}

.inner span{
font-size:60px;
font-weight:800;
color:transparent;
background:linear-gradient(135deg,aqua 0%,#fe6a50 5%,red 15%,#2fe3fe 50%,#8900ff 100%);
-webkit-background-clip:text;
background-size:300%;
}

</style>
</head>
<body>
<div class="outer"></div>
<div class="inner"><span>0%</span>
</div>
<script>
let outer=document.querySelector('.outer');
let inner=document.querySelector('.inner');
let percent=document.querySelector('span');
let count=0;

inner.addEventListener('click',()=>{
let loading=setInterval(animate,100);

function animate(){
if(count==100){
    outer.classList.remove("active-loader");
    outer.classList.add("active-loader-2");
    clearInterval();
}
else{
count=count+1;
percent.textContent=count+'%';
outer.classList.add("active-loader");
}
}
});
</script>
</body>
</html>

Comments

Post a Comment