L
o
a
d
i
n
g
.demo{
background: #99b977;
}
.loader{
width: 300px;
margin: 50px auto;
text-align: center;
padding: 10px 0 30px;
border-bottom: 1px solid #846cf4;
}
.loader span{
position: relative;
display: inline-block;
font-size: 18px;
color: #846cf4;
text-transform: uppercase;
}
.loader .loading span{
animation-name: loading-1;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
margin: 0 auto;
}
.loader .loading span:nth-child(1){
animation-delay: .1s;
}
.loader .loading span:nth-child(2){
animation-delay: .2s;
}
.loader .loading span:nth-child(3){
animation-delay: .3s;
}
.loader .loading span:nth-child(4){
animation-delay: .4s;
}
.loader .loading span:nth-child(5){
animation-delay: .5s;
}
.loader .loading span:nth-child(6){
animation-delay: .6s;
}
.loader .loading span:nth-child(7){
animation-delay: .7s;
}
@-webkit-keyframes loading-1{
from {
transform: translate(0px, 0px);
}
25%{
transform: translate(0px, -10px);
}
to{
transform: translate(0px, 0px);
}
}
@keyframes loading-1{
from {
transform: translate(0px, 0px);
}
25%{
transform: translate(0px, -10px);
}
to{
transform: translate(0px, 0px);
}
}