CSS
body {
text-align: center;
}
.wrapper {
position: absolute;
background: #333;
width: 100%;
height: 100%;
}
.pl {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
.loader1,
.loader2,
.loader3 {
border: 4px #fff solid;
border-radius: 50%;
box-shadow: 0 4px 6px rgba(0,0,0,0.7);
}
.loader1 {
background: linear-gradient(45deg,#00C9FF,#92FE9D);
position: absolute;
width: 100px;
height: 100px;
animation: scale_1 4s infinite linear;
}
.loader2 {
background: linear-gradient(45deg,#d53369,#cbad6d);
position: absolute;
width: 100px;
height: 100px;
animation: scale_2 4s 1s infinite linear;
}
.loader3 {
background: linear-gradient(45deg,#C04848,#480048);
position: absolute;
width: 100px;
height: 100px;
animation: scale_3 4s 2s infinite linear;
}
@keyframes scale_1 {
0% {
transform: scale(0);
z-index: 3;
}
20% {
z-index: 2;
}
50% {
transform: scale(1);
z-index: 1;
}
}
@keyframes scale_2 {
0% {
transform: scale(0);
z-index: 3;
}
20% {
z-index: 2;
}
50% {
transform: scale(1);
z-index: 1;
}
}
@keyframes scale_3 {
0% {
transform: scale(0);
z-index: 3;
}
20% {
z-index: 2;
}
50% {
transform: scale(1);
z-index: 1;
}
}
