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

For learning Html and CSS or any type of coding you must play with the code.
Here in this tutorial you will learn how to create a awesome loading screen animation using Html and CSS.

Steps to be followed:-

1. Create a div with a class and name the class what you like i am giving it name as center
2. Now create 8 div tag inside the above div tag with class bar and bar1, bar2, bar3 utpo bar8 or even more if  you like
3. Now it's time for css... Reset the css body by margin 0
4. Now align div in middle of the display
5. Now provide the dimensions and background to the bars
6. Provide the keyframes for animation
7. Set the time delay to every bar to make it look like loading screen.

Video Tutorial for this tutorial is given at bottom of this post.

Code for the loading screen is given below.

Html Code

 <div class="center">  
       <div class="bar bar1"></div>  
       <div class="bar bar2"></div>  
       <div class="bar bar3"></div>  
       <div class="bar bar4"></div>  
       <div class="bar bar5"></div>  
       <div class="bar bar6"></div>  
       <div class="bar bar7"></div>  
       <div class="bar bar8"></div>  
     </div>  

CSS Style Code

 body{  
   margin: 0;  
   padding: 0;  
   background: #00456e;  
 }  
 .center{  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   transform: translate(-50%, -50%);  
 }  
 .bar{  
   width: 6px;  
   height: 60px;  
   background: #fff;  
   border-radius: 20px;  
   display: inline-block;  
   animation: loading 1.2s ease-in infinite;  
 }  
 .bar1{  
   animation-delay: 0.1s;  
 }  
 .bar2{  
   animation-delay: 0.2s;  
 }  
 .bar3{  
   animation-delay: 0.3s;  
 }  
 .bar4{  
   animation-delay: 0.4s;  
 }  
 .bar5{  
   animation-delay: 0.5s;  
 }  
 .bar6{  
   animation-delay: 0.6s;  
 }  
 .bar7{  
   animation-delay: 0.7s;  
 }  
 .bar8{  
   animation-delay: 0.8s;  
 }  
 @keyframes loading{  
   0%{  
     transform: scaleY(0.1);  
   }  
   50%{  
     transform: scaleY(1);  
   }  
   100%{  
     transform: scaleY(0.1);  
   }  
 }  

For getting latest tutorials to your mail box please subscribe to our newsletter.