.loading
1
{
height
:
100px
;
position
:
relative
;
width
:
80px
;
}
.loading
1
> div {
background-color
:
#FFFFFF
;
height
:
30px
;
position
:
absolute
;
width
:
12px
;
-moz-border-radius:
5px
;
-webkit-border-radius:
5px
;
border-radius:
5px
;
-webkit-transform:scale(
0.4
);
-moz-transform:scale(
0.4
);
-o-transform:scale(
0.4
);
-webkit-animation-name:loading
1
;
-webkit-animation-duration:
1.04
s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-
direction
:linear;
-moz-animation-name:loading
1
;
-moz-animation-duration:
1.04
s;
-moz-animation-iteration-count:infinite;
-moz-animation-
direction
:linear;
-o-animation-name:loading
1
;
-o-animation-duration:
1.04
s;
-o-animation-iteration-count:infinite;
-o-animation-
direction
:linear;
}
.loading
1
> div:nth-child(
1
) {
left
:
0
;
top
:
36px
;
-webkit-transform:rotate(
-90
deg);
-moz-transform:rotate(
-90
deg);
-o-transform:rotate(
-90
deg);
-webkit-animation-delay:
0.39
s;
-moz-animation-delay:
0.39
s;
-o-animation-delay:
0.39
s;
}
.loading
1
> div:nth-child(
2
) {
left
:
10px
;
top
:
13px
;
-webkit-transform:rotate(
-45
deg);
-moz-transform:rotate(
-45
deg);
-o-transform:rotate(
-45
deg);
-webkit-animation-delay:
0.52
s;
-moz-animation-delay:
0.52
s;
-o-animation-delay:
0.52
s;
}
.loading
1
> div:nth-child(
3
) {
left
:
34px
;
top
:
4px
;
-webkit-transform:rotate(
0
deg);
-moz-transform:rotate(
0
deg);
-o-transform:rotate(
0
deg);
-webkit-animation-delay:
0.65
s;
-moz-animation-delay:
0.65
s;
-o-animation-delay:
0.65
s;
}
.loading
1
> div:nth-child(
4
) {
right
:
10px
;
top
:
13px
;
-webkit-transform:rotate(
45
deg);
-moz-transform:rotate(
45
deg);
-o-transform:rotate(
45
deg);
-webkit-animation-delay:
0.78
s;
-moz-animation-delay:
0.78
s;
-o-animation-delay:
0.78
s;
}
.loading
1
> div:nth-child(
5
) {
right
:
0
;
top
:
36px
;
-webkit-transform:rotate(
90
deg);
-moz-transform:rotate(
90
deg);
-o-transform:rotate(
90
deg);
-webkit-animation-delay:
0.91
s;
-moz-animation-delay:
0.91
s;
-o-animation-delay:
0.91
s;
}
.loading
1
> div:nth-child(
6
) {
right
:
10px
;
bottom
:
9px
;
-webkit-transform:rotate(
135
deg);
-moz-transform:rotate(
135
deg);
-o-transform:rotate(
135
deg);
-webkit-animation-delay:
1.04
s;
-moz-animation-delay:
1.04
s;
-o-animation-delay:
1.04
s;
}
.loading
1
> div:nth-child(
7
) {
bottom
:
0
;
left
:
34px
;
-webkit-transform:rotate(
180
deg);
-moz-transform:rotate(
180
deg);
-o-transform:rotate(
180
deg);
-webkit-animation-delay:
1.17
s;
-moz-animation-delay:
1.17
s;
-o-animation-delay:
1.17
s;
}
.loading
1
> div:nth-child(
8
) {
left
:
10px
;
bottom
:
9px
;
-webkit-transform:rotate(
-135
deg);
-moz-transform:rotate(
-135
deg);
-o-transform:rotate(
-135
deg);
-webkit-animation-delay:
1.3
s;
-moz-animation-delay:
1.3
s;
-o-animation-delay:
1.3
s;
}
@-webkit-keyframes loading
1
{
0%
{
background-color
:
#000000
}
100%
{
background-color
:
#FFFFFF
}
}
@-moz-keyframes loading
1
{
0%
{
background-color
:
#000000
}
100%
{
background-color
:
#FFFFFF
}
}
@-o-keyframes loading
1
{
0%
{
background-color
:
#000000
}
100%
{
background-color
:
#FFFFFF
}
}