@keyframes loading {
0% {
transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
33% {
transform: scale(1.2) rotateZ(120deg);
transform: scale(1.2) rotateZ(120deg);
transform: scale(1.2) rotateZ(120deg);
transform: scale(1.2) rotateZ(120deg);
opacity: .2;
}
67% {
transform: scale(0.7) rotateZ(240deg);
transform: scale(0.7) rotateZ(240deg);
transform: scale(0.7) rotateZ(240deg);
transform: scale(0.7) rotateZ(240deg);
opacity: .6;
}
100% {
transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
opacity: 1;
}
}
.loader {
overflow: hidden;
font-size: 450px;
}
.loader span {
animation: loading 1s linear infinite -0.7s;
display:inline-block;
}
.loader .span2 {
animation: loading 1s linear infinite -0.2s;
}
.loader .span3 {
animation: loading 1s linear infinite -0.5s;
}
.loader .span4 {
animation: loading 1s linear infinite -1.2s;
}
.loader .span5 {
animation: loading 1s linear infinite -0.36s;
}
.loader .span6 {
animation: loading 1s linear infinite -0.65s;
}
.loader .span7 {
animation: loading 1s linear infinite -0.93s;
}