Animated Loader



Beautiful animated loader




 <html>
<head><title>Loader</title></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>

                    
                  
                



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%;

}