Awesome Circular Loading Screen Using Html & CSS Only || TR WEB SCHOOL #3

In this tutorial you will learn how to create a awesome circular loading screen.
To learn coding play with code ....

Steps to be followed:-

1. First create a div with a class center in html file
2. Now reset the css formatting  by providing margin or padding to zero.
3. Now center the div by the code as given below.
4. Now provide the loading animation keyframes of transform: rotateZ() at zero and 360 degree.
5. Now connect the loading animation in class center css.

Html Code:-

  <div class="center"></div>  

CSS Code:-

 body{  
   margin: 0;  
   padding: 0;  
   background: #00456e;  
 }  
 .center{  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   transform: translate(-50%,-50%);  
   width: 60px;  
   height: 60px;  
   border-radius: 50%;  
   border: 16px solid #ededebb6;  
   border-top: 16px solid green;  
   animation: loading 1.2s ease-in infinite;  
 }  
 @keyframes loading{  
   0%{  
     transform: rotateZ(0deg);  
   }  
   100%{  
     transform: rotateZ(360deg);  
   }  
 }  

Awesome Circular Loading Screen Using Html & CSS 

Video Tutorial

If you find this tutorial successful then please subscribe to our newsletter.