11 Best Preloaders Of March 2020 By DanishWebCreator

11 Best Preloaders Of March 2020 By DanishWebCreator

All Preloader:-

1.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background: #000;
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul{
list-style:none;
width: 200px;
height: 200px;
border: 5px solid rgba(255,255,255,0.3);
border-top-color: rgb(0,255,0);
border-left-color: rgb(0,255,0);
border-radius: 50%;
transform: rotateZ(0deg);
animation: circles 2s ease infinite;
}
ul:before{
content: 'Loading...';
display: flex;
justify-content: center;
align-items: center;
color: rgb(0,255,0);
line-height: 180px;
font-size: 40px;
}
@keyframes circles{
100%{transform: rotateZ(360deg);}
}

</style>
</head>
<body>
<div class="preloader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>

</html>

2.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background: #000;
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul{
list-style:none;/*
animation: circles 2s ease infinite;*/
}
ul li{
display: inline-block;
font-size: 60px;
animation: circles 4s ease infinite;
color: #fff;
font-weight: bold;
opacity: 0;
animation-delay: calc(0.4 * var(--i));
}
@keyframes circles{
0%{opacity: 0;}
100%{opacity: 1;}
}
/*ul li:nth-child(1){
animation-delay: 0.2s;
}ul li:nth-child(2){
animation-delay: 0.4s;
}ul li:nth-child(3){
animation-delay: 0.6s;
}ul li:nth-child(4){
animation-delay: 0.8s;
}ul li:nth-child(5){
animation-delay: 1s;
}ul li:nth-child(6){
animation-delay: 1.2s;
}ul li:nth-child(7){
animation-delay: 1.4s;
}ul li:nth-child(8){
animation-delay: 1.6s;
}ul li:nth-child(9){
animation-delay: 1.8s;
}ul li:nth-child(10){
animation-delay: 2s;
}*/

</style>
</head>
<body>
<div class="preloader">
<ul>
<li style="--i:1;">L</li>
<li style="--i:2;">o</li>
<li style="--i:3;">a</li>
<li style="--i:4;">d</li>
<li style="--i:5;">i</li>
<li style="--i:6;">n</li>
<li style="--i:7;">g</li>
<li style="--i:8;">.</li>
<li style="--i:9;">.</li>
<li style="--i:10;">.</li>
</ul>
</div>
</body>
</html>

3.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-color: black;*/
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul{
list-style:none;
width: 60px;
height: 60px;
/*border: 5px solid pink;*/
border-radius: 50%;
transform: scale(1);
/*animation: balls 2s infinite linear;*/
position: relative;
color: red;
font-weight: 400;
}
ul:before{
content: 'Loading...';
position: absolute;
display: flex;
justify-content:center;
align-items: center;
width: 80px;
height: 80px;
top: -20px;
left: -20px;
border: 2px solid;
border-radius: 50%;
transform: scale(2.5);
animation: balls 8s infinite linear;
}
@keyframes balls{
0%{border-color: red;color: red;transform: translateX(-150px) scale(2.5);}
20%{border-color: darkblue;color: darkblue;}
40%{border-color: blue;color: blue;}
50%{transform: translateX(150px) scale(2.5);}
60%{border-color: orange;color: orange;}
80%{border-color: green;color: green;}
100%{border-color: greenyellow;color: greenyellow;transform: translateX(-150px) scale(2.5);}
}
</style>
</head>
<body>
<div class="preloader">
<ul>
</ul>
</div>
</body>

</html>

4.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
overflow: hidden;
}
body:before{
content: '';
background: pink;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0vh;
z-index: -1;
animation: layerone 10s linear infinite;
}
ul{
list-style:none;
}
ul li{
display: inline-block;
font-size: 100px;
/*animation: circles 4s ease infinite;*/
color: #fff;
font-weight: bolder;
font-family: 'arial';
position: fixed relative;
z-index: 999;
}
@keyframes layerone{
0%{top: 0vh;left: -100vw;background-color: pink;}
20%{background-color: orange;}
40%{background-color: red;}
50%{top: 0;left: 0vw;right: 0;}
60%{background-color: green;}
80%{;background-color: blue;}
100%{top: -100vh;left: 0vw;right: 0vw;}
}
</style>
</head>
<body>
<ul>
<li>Loading...</li>
</ul>

</body>

</html>

5.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
.preloader{
width: 100px;
height: 100px;
position:relative;
}
ul li{
width: 100px;
height: 100px;
margin-left: 4px;
display: inline-block;
position: absolute;
/*animation: balls 2s infinite;*/
}
ul{
list-style:none;
}

ul li:nth-child(1){
border: 5px solid yellow;
animation: sqrone 3s infinite linear;
}ul li:nth-child(2){
border: 5px solid blue;
animation: sqrtwo 3s infinite linear;
}ul li:nth-child(3){
border: 5px solid red;
animation: sqrthree 3s infinite linear;

}ul li:nth-child(4){
border: 5px solid orange;
animation: sqrfour 3s infinite linear;
}
@keyframes sqrone{
0%{transform: translateY(0px);}
50%{transform: translateY(-100px); }
100%{transform: translateY(0px) rotate(180deg);}
}
@keyframes sqrtwo{
0%{transform: translateY(0px);}
50%{transform: translateY(100px); }
100%{transform: translateY(0px) rotate(180deg);}
}
@keyframes sqrthree{
0%{transform: translateY(0px);}
50%{transform: translateX(-100px); }
100%{transform: translateY(0px) rotate(180deg);}
}
@keyframes sqrfour{
0%{transform: translateY(0px);}
50%{transform: translateX(100px); }
100%{transform: translateY(0px) rotate(180deg);}
}
</style>
</head>
<body>
<div class="preloader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

6.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;
padding: 0;
box-sizing: border-box;}
body{
width: 100%;
height: 100vh;
background: black;
position: relative;
}
div{
width:50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
div:before{
content: '';
position: absolute;
top: -40%;
left: -40%;
width:80px;
height: 80px;
border: 2px solid green;
border-radius: 50%;
transform: scale(1);
opacity: 0;
animation: abc 2s infinite linear;
}
div:after{
content: '';
position: absolute;
top: -40%;
left: -40%;
width:80px;
height: 80px;
border: 2px solid green;
border-radius: 50%;
transform: scale(1);
animation: abc 2s infinite linear;
animation-delay: 1s;
opacity: 0
}
@keyframes abc{
0%{transform: scale(1);opacity: 0;}
50%{opacity: 1;}
100%{transform: scale(2);opacity: 0;}
}

</style>
</head>
<body>
<div></div>
</body>

</html>

7.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul li{
width: 30px;
height: 30px;
background-color: black;
border-radius: 50%;
margin-left: 4px;
display: inline-block;
transform: scale(1);
animation: balls 2s infinite;
}
ul{
list-style:none;
}
@keyframes balls{
0%{transform: scale(1);}
50%{transform: scale(0);}
100%{transform: scale(1);}
}
ul li:nth-child(1){
background-color: blue;
animation-delay: .2s;
}ul li:nth-child(2){
background-color:yellow ;
animation-delay: .5s;
}ul li:nth-child(3){
background-color: green;
animation-delay: .7s;
}
</style>
</head>
<body>
<div class="preloader">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

8.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-color: black;*/
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul{
list-style:none;
width: 60px;
height: 60px;
/*border: 5px solid pink;*/
border-radius: 50%;
transform: scale(1);
/*animation: balls 2s infinite linear;*/
position: relative;
color: red;
font-weight: 400;
}
ul:before{
content: 'Loading...';
position: absolute;
display: flex;
justify-content:center;
align-items: center;
width: 80px;
height: 80px;
top: -20px;
left: -20px;
border: 2px solid red;
border-radius: 50%;
animation: balls 4s infinite ease;
}
ul:after{
content: 'Loading...';
position: absolute;
display: flex;
justify-content:center;
align-items: center;
width: 80px;
height: 80px;
top: -20px;
left: -20px;
border: 1px solid red;
border-radius: 50%;
opacity: 0;
animation: balls 4s infinite ease;
animation-delay: 2s;
}
@keyframes balls{
0%{transform: scale(1);opacity: 0;transform: translateX(200px);}
50%{transform: scale(2);opacity: 1;}
100%{transform: scale(1);opacity: 0;transform: translateX(-200px);}
}
ul li:nth-child(1){
background-color: blue;
animation-delay: .2s;
}ul li:nth-child(2){
background-color:yellow ;
animation-delay: .5s;
}ul li:nth-child(3){
background-color: green;
animation-delay: .7s;
}
</style>
</head>
<body>
<div class="preloader">
<ul>
</ul>
</div>
</body>

</html>

9.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul li{
width: 5px;
height: 30px;
background-color: black;
/*border-radius: 50px;*/
display: inline-block;
animation: lines 1.5s infinite;
}
ul{
list-style:none;
}
@keyframes lines{
50%{transform: scaleY(2);}
}
ul li:nth-child(1){
background-color: yellow;
animation-delay: .2s;
}ul li:nth-child(2){
background-color: blue;
animation-delay: .4s;
}ul li:nth-child(3){
background-color: green;
animation-delay: .6s;
}ul li:nth-child(4){
background-color: yellowgreen;
animation-delay: .8s;
}ul li:nth-child(5){
background-color: orange;
animation-delay: 1s;
}ul li:nth-child(6){
background-color: red;
animation-delay: 1.2s;
}

</style>
</head>
<body>
<div class="preloader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>

</html>

10.Source Code:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
}
.preloader{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
align-items: center;
}
ul li{
width: 40px;
height: 40px;
background-color: black;
border-radius: 50%;
margin-left: 4px;
display: inline-block;
transform: translateY(0);
animation: balls 2.5s infinite linear;
}
ul{
list-style:none;
border-bottom: 5px solid white;
}
@keyframes balls{
0%{transform: translateY(0);}
50%{transform: translateY(-70px);}
100%{transform: translateY(0px);}
}
ul li:nth-child(1){
background-color: yellow;
animation-delay: .2s;
}ul li:nth-child(2){
background-color: blue;
animation-delay: .6s;
}ul li:nth-child(3){
background-color: green;
animation-delay: 1s;
}ul li:nth-child(4){
background-color: yellowgreen;
animation-delay: .4s;
}ul li:nth-child(5){
background-color: orange;
animation-delay: .8s;
}
</style>
</head>
<body>
<div class="preloader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>

</html>

11.Source Code:-

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

background-color: rgba();

}

.preloader{

width: 100vw;

height: 100vh;

position: absolute;

display: flex;

justify-content:center;

align-items: center;

}

ul li{

width: 15px;

height: 15px;

background-color: #000;

border-radius: 50%;

margin-left: 4px;

display: inline-block;

opacity: 0;

animation: balls 3s infinite ease;

}

ul{

list-style:none;

}

@keyframes balls{

0%{opacity: 1;}

50%{opacity: 0;}

100%{opacity: 1;}

}

ul li:nth-child(1){

/*background-color: blue;*/

animation-delay: 0.1s;

}ul li:nth-child(2){

/*background-color:yellow ;*/

animation-delay: 0.5s;

}ul li:nth-child(3){

/*background-color: green;*/

animation-delay: 1s;

}ul li:nth-child(4){

/*background-color:yellow ;*/

animation-delay: 1.5s;

}ul li:nth-child(5){

/*background-color: green;*/

animation-delay: 2s;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>