Windows Loader | Loading Animation Using Html Css  

 <div class="loader">  
  <div class="wrapper">  
   <span></span>  
   <span></span>  
   <span></span>  
   <span></span>  
   <span></span>  
  </div>  
 </div>  

There is all HTML code for the  Loading Animation. Now, you can see output without CSS, then we write CSS for the Loading Animation.

Output

blank output with Blank Html Tag

CSS code

 * {  
  margin:0px;  
  padding:0px;  
  box-sizing:border-box;  
 }  
 body {  
  background:black;  
 }  
 .loader,.wrapper {  
  position:absolute;  
  top:50%;  
  left:50%;  
  transform:translate(-50%,-50%);  
 }  
 .loader {  
  width:90vw;  
 }  
 .loader .wrapper span {  
  width:5px;  
  height:5px;  
  background:white;  
  display:inline-block;  
  position:relative;  
  margin:0px 2px;  
  border-radius:50%;  
  opacity:0;  
  animation:loading 3000ms ease-in-out infinite;  
 }  
 .loader .wrapper span:nth-child(5) {  
  animation-delay:100ms;  
 }  
 .loader .wrapper span:nth-child(4) {  
  animation-delay:200ms;  
 }  
 .loader .wrapper span:nth-child(3) {  
  animation-delay:300ms;  
 }  
 .loader .wrapper span:nth-child(2) {  
  animation-delay:400ms;  
 }  
 .loader .wrapper span:nth-child(1) {  
  animation-delay:500ms;  
 }  
 @keyframes loading {  
  0% {  
   transform:translateX(-350px);  
   opacity:0;  
  }  
  35%,65% {  
   transform:translateX(0px);  
   opacity:1;  
  }  
  100% {  
   transform:translateX(350px);  
   opacity:0;  
  }   
 }  

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the Pure Loading Animation, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a Loading Animation using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – inertia

Check out more…..

1. How to design HTML Loader using HTML CSS JAVASCRIPT

2. Simple CSS loaders | 8+ Easy Css loaders with only Html 

3. Circular Progress Bar using HTML,CSS and Javascript – Codewithrandom