Awesome Linear Loading Screen Using Html & CSS Only || TR WEB SCHOOL #4

Welcome to our new tutorial of awesome loading screen using HTML & CSS only.
In this tutorial you will learn to create a linear loading screen using HTML & CSS only.

My important tip for you to learn coding is to learn code with joy & fun. So that is why i am creating such type of tutorials.

Steps to be followed:-

1. Create a div with a class
2. Now create div elements inside the first one
3. Write the CSS code which is given below
4. Now the awesome linear loading screen is ready.

HTML Code:-

 <div class="center">  
       <h2>Loading...</h2>  
       <div class="ellipse">  
       <div class="dot dot1"></div>  
       <div class="dot dot2"></div>  
       <div class="dot dot3"></div>  
       <div class="dot dot4"></div>  
       <div class="dot dot5"></div>  
       <div class="dot dot6"></div>  
     </div></div>  

CSS Code:- 

 body{  
   margin: 0;  
   background: #00456e;  
 }  
 .center{  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   transform: translate(-50%, -50%);  
   color: #fff;  
 }  
 .center h2{  
   text-align: center;  
 }  
 .ellipse{  
   border: 1px solid #fff;  
   width: 250px;  
   height: 20px;  
   border-radius: 15px;  
 }  
 .dot{  
   background: #fff;  
   height: 18px;  
   width: 35px;  
   display: inline-block;  
   border-radius: 15px;  
   margin-left: 3px;  
   margin-top: 1px;  
   animation: loading 1.5s ease-in infinite;  
 }  
 .dot1{  
   animation-delay: 0.2s;  
 }  
 .dot2{  
   animation-delay: 0.4s;  
 }  
 .dot3{  
   animation-delay: 0.6s;  
 }  
 .dot4{  
   animation-delay: 0.8s;  
 }  
 .dot5{  
   animation-delay: 1s;  
 }  
 .dot6{  
   animation-delay: 1.2s;  
 }  
 @keyframes loading{  
   0%{  
     background: rgba(255,255,255,0);  
   }  
   100%{  
     background: rgba(255,255,255);  
   }  
 }  

Video Tutorial:-

If you like this tutorial please don't forgot to subscribe to our newsletter to get latest updates about our blog.