Do You Love windows Loading Animation? If Yes Then its for you!
HTML CODE:
<div class="container">
<div class="loader-wrapper">
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
</div>
<div class="bot">
<br>
Loading
</div>
</div>
The Following Are CSS CODE:
`body{
margin:0;
display:grid;
place-items:center;
height:100vh;
background-color:#00a2ed;
}
.container{
width:80px;
height:80px;
display:grid;
place-items:center;
}
.loader-wrapper{
width:80px;
height:80px;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
}
.loader{
position:absolute;
height:20px;
animation: spin 3.5s linear infinite;
}
.loader .dot{
width:6px;
height:6px;
background-color:#fff;
border-radius:50%;
position:relative;
top:30px;
}
@keyframes spin{
30%{
transform:rotate(220deg);
}
40%{
opacity:1;
transform:rotate(450deg);
}
75%{
opacity:1;
transform:rotate(720deg);
}
76%{
opacity:0;
}
100%{
opacity:0;
transform:rotate(0deg);
}
}
.loader:first-child{
animation-delay:0.15s;
}
.loader:nth-child(2){
animation-delay:0.3s;
}
.loader:nth-child(3){
animation-delay:0.45s;
}
.loader:nth-child(4){
animation-delay:0.6s;
}
.loader:nth-child(5){
animation-delay:0.75s;
}
.loader:last-child{
animation-delay:0.9s;
}
.bot{
display:flex;
margin-top:90%;
color:white;
font-size:20px;
font-family:Raleway;
}`
Top comments (0)