1#load {
2  position: absolute;
3  width: 600px;
4  height: 36px;
5  left: 50%;
6  top: 40%;
7  margin-left: -300px;
8  overflow: visible;
9  -webkit-user-select: none;
10  -moz-user-select: none;
11  -ms-user-select: none;
12  user-select: none;
13  cursor: default;
14}
15
16#load div {
17  position: absolute;
18  width: 20px;
19  height: 36px;
20  opacity: 0;
21  font-family: Helvetica, Arial, sans-serif;
22  animation: move 2s linear infinite;
23  -o-animation: move 2s linear infinite;
24  -moz-animation: move 2s linear infinite;
25  -webkit-animation: move 2s linear infinite;
26  transform: rotate(180deg);
27  -o-transform: rotate(180deg);
28  -moz-transform: rotate(180deg);
29  -webkit-transform: rotate(180deg);
30  color: #35C4F0;
31}
32
33#load div:nth-child(2) {
34  animation-delay: 0.2s;
35  -o-animation-delay: 0.2s;
36  -moz-animation-delay: 0.2s;
37  -webkit-animation-delay: 0.2s;
38}
39
40#load div:nth-child(3) {
41  animation-delay: 0.4s;
42  -o-animation-delay: 0.4s;
43  -webkit-animation-delay: 0.4s;
44  -webkit-animation-delay: 0.4s;
45}
46
47#load div:nth-child(4) {
48  animation-delay: 0.6s;
49  -o-animation-delay: 0.6s;
50  -moz-animation-delay: 0.6s;
51  -webkit-animation-delay: 0.6s;
52}
53
54#load div:nth-child(5) {
55  animation-delay: 0.8s;
56  -o-animation-delay: 0.8s;
57  -moz-animation-delay: 0.8s;
58  -webkit-animation-delay: 0.8s;
59}
60
61#load div:nth-child(6) {
62  animation-delay: 1s;
63  -o-animation-delay: 1s;
64  -moz-animation-delay: 1s;
65  -webkit-animation-delay: 1s;
66}
67
68#load div:nth-child(7) {
69  animation-delay: 1.2s;
70  -o-animation-delay: 1.2s;
71  -moz-animation-delay: 1.2s;
72  -webkit-animation-delay: 1.2s;
73}
74
75@keyframes move {
76  0% {
77    left: 0;
78    opacity: 0;
79  }
80
81  35% {
82    left: 41%;
83    -moz-transform: rotate(0deg);
84    -webkit-transform: rotate(0deg);
85    -o-transform: rotate(0deg);
86    transform: rotate(0deg);
87    opacity: 1;
88  }
89
90  65% {
91    left: 59%;
92    -moz-transform: rotate(0deg);
93    -webkit-transform: rotate(0deg);
94    -o-transform: rotate(0deg);
95    transform: rotate(0deg);
96    opacity: 1;
97  }
98
99  100% {
100    left: 100%;
101    -moz-transform: rotate(-180deg);
102    -webkit-transform: rotate(-180deg);
103    -o-transform: rotate(-180deg);
104    transform: rotate(-180deg);
105    opacity: 0;
106  }
107}
108
109@-moz-keyframes move {
110  0% {
111    left: 0;
112    opacity: 0;
113  }
114
115  35% {
116    left: 41%;
117    -moz-transform: rotate(0deg);
118    transform: rotate(0deg);
119    opacity: 1;
120  }
121
122  65% {
123    left: 59%;
124    -moz-transform: rotate(0deg);
125    transform: rotate(0deg);
126    opacity: 1;
127  }
128
129  100% {
130    left: 100%;
131    -moz-transform: rotate(-180deg);
132    transform: rotate(-180deg);
133    opacity: 0;
134  }
135}
136
137@-webkit-keyframes move {
138  0% {
139    left: 0;
140    opacity: 0;
141  }
142
143  35% {
144    left: 41%;
145    -webkit-transform: rotate(0deg);
146    transform: rotate(0deg);
147    opacity: 1;
148  }
149
150  65% {
151    left: 59%;
152    -webkit-transform: rotate(0deg);
153    transform: rotate(0deg);
154    opacity: 1;
155  }
156
157  100% {
158    left: 100%;
159    -webkit-transform: rotate(-180deg);
160    transform: rotate(-180deg);
161    opacity: 0;
162  }
163}
164
165@-o-keyframes move {
166  0% {
167    left: 0;
168    opacity: 0;
169  }
170
171  35% {
172    left: 41%;
173    -o-transform: rotate(0deg);
174    transform: rotate(0deg);
175    opacity: 1;
176  }
177
178  65% {
179    left: 59%;
180    -o-transform: rotate(0deg);
181    transform: rotate(0deg);
182    opacity: 1;
183  }
184
185  100% {
186    left: 100%;
187    -o-transform: rotate(-180deg);
188    transform: rotate(-180deg);
189    opacity: 0;
190  }
191}