Windows Loader | Loading Animation Using Html Css







Windows Loader | Loading Animation Using Html Css  

Welcome🎉 to Code With Random blog. We learn how to create a  Loading Animation in this blog. We use HTML & CSS  for  Loading Animation. Hope you enjoy our blog so let’s start with a basic HTML structure for the  Loading Animation. 

HTML code

 <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

Windows Loader | Loading Animation Using Html Css
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

Windows Loader | Loading Animation Using Html Css

Windows Loader | Loading Animation Using Html Css

We have completed our CSS section,  Here is our updated output with CSSHope 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…..



Share on:

Leave a Comment