%span.css3_loader<
%figure>
%figure>
%figure>
%figure>
%figure>
@-webkit-keyframes fade {
0% { opacity: 1 }
100% { opacity: 0.1 }
}
@-moz-keyframes fade {
0% { opacity: 1 }
100% { opacity: 0.1 }
}
@mixin animation_delay($sec) {
-webkit-animation-delay: $sec;
-moz-animation-delay: $sec;
}
.css3_loader {
figure {
background: olive;
margin: 0 1px 0 0;
display: inline-block;
height: 1em;
width: 4px;
opacity: 0.1;
-webkit-animation: fade 1s linear infinite;
-moz-animation: fade 1s linear infinite;
&:nth-child(1) {
@include animation_delay(0s);
@include border-radius(2px 0 0 2px);
}
&:nth-child(2) {
@include animation_delay(0.2s);
}
&:nth-child(3) {
@include animation_delay(0.4s);
}
&:nth-child(4) {
@include animation_delay(0.6s);
}
&:nth-child(5) {
@include animation_delay(0.8s);
@include border-radius(0 2px 2px 0);
}
}
}