How to Design linear Preloder Using Html css - CodehubDeep


How to Design website linear Preloder Using Html css - CodehubDeep


in this blog post im share code with you a beautifull website linear Preloder using html and css 


HTML : 


<div class="loader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

CSS : 

.loader{
background-color: #fff;
width: 270px;
margin: 50px auto 0;
padding: 17px 15px 15px;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.loader ul{
padding: 0;
margin: 0;
list-style: none;
}
.loader ul li{
background: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-block;
animation: grow 1.6s ease-in-out infinite;
}
.loader ul li:nth-child(1){
background: #ffff00;
box-shadow: 0 0 40px #ffff00;
animation-delay: -1.4s;
}
.loader ul li:nth-child(2){
background: #76ff03;
box-shadow: 0 0 40px #76ff03;
animation-delay: -1.2s;
}
.loader ul li:nth-child(3){
background: #f06292;
box-shadow: 0 0 40px #f06292;
animation-delay: -1s;
}
.loader ul li:nth-child(4){
background: #4fc3f7;
box-shadow: 0 0 40px #4fc3f7;
animation-delay: -0.8s;
}
.loader ul li:nth-child(5){
background: #ba68c8;
box-shadow: 0 0 40px #ba68c8;
animation-delay: -0.6s;
}
.loader ul li:nth-child(6){
background: #f57300;
box-shadow: 0 0 40px #f57300;
animation-delay: -0.4s;
}
.loader ul li:nth-child(7){
background: #673ab7;
box-shadow: 0 0 40px #673ab7;
animation-delay: -0.2s;
}
@keyframes grow{
0%,
40%,
100%{ transform: scale(0.2); }
20%{ transform: scale(1); }
}