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
 |
| 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
