Create Windows Loader Using CSS

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;
}`

For Demo :