1#loader {
2  width: 80px;
3  height: 40px;
4  position: absolute;
5  top: 50%;
6  left: 50%;
7  margin: -20px -40px;
8  z-index: 1000;
9}
10
11.lightsaber {
12  position: absolute;
13  width: 4px;
14  height: 12px;
15  background-color: #666;
16  border-radius: 1px;
17  bottom: 0;
18}
19
20.lightsaber.ls-left {
21  left: 0;
22}
23
24.lightsaber.ls-right {
25  right: 0;
26}
27
28.lightsaber:before {
29  position: absolute;
30  content: ' ';
31  display: block;
32  width: 2px;
33  height: 25px;
34  max-height: 1px;
35  left: 1px;
36  top: 1px;
37  background-color: #fff;
38  border-radius: 1px;
39  -webkit-transform: rotateZ(180deg);
40  transform: rotateZ(180deg);
41  -webkit-transform-origin: center top;
42  -ms-transform-origin: center top;
43  transform-origin: center top;
44}
45
46.lightsaber:after {
47  position: absolute;
48  content: ' ';
49  display: block;
50  width: 2px;
51  height: 2px;
52  left: 1px;
53  top: 4px;
54  background-color: #fff;
55  border-radius: 50%;
56}
57
58.ls-particles {
59  position: absolute;
60  left: 42px;
61  top: 10px;
62  width: 1px;
63  height: 5px;
64  background-color: rgb(51, 51, 51, 0);
65  -webkit-transform: rotateZ(0deg);
66  transform: rotateZ(0deg);
67}
68
69.lightsaber.ls-green:before {
70  -webkit-animation: showlightgreen 2s ease-in-out infinite 1s;
71  animation: showlightgreen 2s ease-in-out infinite 1s;
72}
73
74.lightsaber.ls-red:before {
75  -webkit-animation: showlightred 2s ease-in-out infinite 1s;
76  animation: showlightred 2s ease-in-out infinite 1s;
77}
78
79.lightsaber.ls-left {
80  -webkit-animation: fightleft 2s ease-in-out infinite 1s;
81  animation: fightleft 2s ease-in-out infinite 1s;
82}
83
84.lightsaber.ls-right {
85  -webkit-animation: fightright 2s ease-in-out infinite 1s;
86  animation: fightright 2s ease-in-out infinite 1s;
87}
88
89.ls-particles.ls-part-1 {
90  -webkit-animation: particles1 2s ease-out infinite 1s;
91  animation: particles1 2s ease-out infinite 1s;
92}
93
94.ls-particles.ls-part-2 {
95  -webkit-animation: particles2 2s ease-out infinite 1s;
96  animation: particles2 2s ease-out infinite 1s;
97}
98
99.ls-particles.ls-part-3 {
100  -webkit-animation: particles3 2s ease-out infinite 1s;
101  animation: particles3 2s ease-out infinite 1s;
102}
103
104.ls-particles.ls-part-4 {
105  -webkit-animation: particles4 2s ease-out infinite 1s;
106  animation: particles4 2s ease-out infinite 1s;
107}
108
109.ls-particles.ls-part-5 {
110  -webkit-animation: particles5 2s ease-out infinite 1s;
111  animation: particles5 2s ease-out infinite 1s;
112}
113
114@-webkit-keyframes showlightgreen {
115  0% {
116    max-height: 0;
117    box-shadow: 0 0 0 0 #87c054;
118  }
119
120  5% {
121    box-shadow: 0 0 4px 2px #87c054;
122  }
123
124  10% {
125    max-height: 22px;
126  }
127
128  80% {
129    max-height: 22px;
130  }
131
132  85% {
133    box-shadow: 0 0 4px 2px #87c054;
134  }
135
136  100% {
137    max-height: 0;
138    box-shadow: 0 0 0 0 #87c054;
139  }
140}
141
142@-webkit-keyframes showlightred {
143  0% {
144    max-height: 0;
145    box-shadow: 0 0 0 0 #f06363;
146  }
147
148  20% {
149    box-shadow: 0 0 4px 2px #f06363;
150  }
151
152  25% {
153    max-height: 22px;
154  }
155
156  80% {
157    max-height: 22px;
158  }
159
160  85% {
161    box-shadow: 0 0 4px 2px #f06363;
162  }
163
164  100% {
165    max-height: 0;
166    box-shadow: 0 0 0 0 #f06363;
167  }
168}
169
170@-webkit-keyframes fightleft {
171  0% {
172    -webkit-transform: rotateZ(0deg);
173    transform: rotateZ(0deg);
174    left: 0;
175    bottom: 0;
176  }
177
178  30% {
179    -webkit-transform: rotateZ(0deg);
180    transform: rotateZ(0deg);
181    bottom: 0;
182  }
183
184  40% {
185    -webkit-transform: rotateZ(45deg);
186    transform: rotateZ(45deg);
187    left: 0;
188    bottom: 2px;
189  }
190
191  45% {
192    -webkit-transform: rotateZ(65deg);
193    transform: rotateZ(65deg);
194    left: 0;
195  }
196
197  65% {
198    -webkit-transform: rotateZ(410deg);
199    transform: rotateZ(410deg);
200    left: 30px;
201    bottom: 10px;
202  }
203
204  95% {
205    -webkit-transform: rotateZ(410deg);
206    transform: rotateZ(410deg);
207    left: 0;
208    bottom: 0;
209  }
210
211  100% {
212    -webkit-transform: rotateZ(360deg);
213    transform: rotateZ(360deg);
214    left: 0;
215    bottom: 0;
216  }
217}
218
219@-webkit-keyframes fightright {
220  0% {
221    -webkit-transform: rotateZ(0deg);
222    transform: rotateZ(0deg);
223    right: 0;
224    bottom: 0;
225  }
226
227  30% {
228    -webkit-transform: rotateZ(0deg);
229    transform: rotateZ(0deg);
230    bottom: 0;
231  }
232
233  45% {
234    -webkit-transform: rotateZ(-45deg);
235    transform: rotateZ(-45deg);
236    right: 0;
237    bottom: 2px;
238  }
239
240  50% {
241    -webkit-transform: rotateZ(-65deg);
242    transform: rotateZ(-65deg);
243    right: 0;
244  }
245
246  68% {
247    -webkit-transform: rotateZ(-410deg);
248    transform: rotateZ(-410deg);
249    right: 27px;
250    bottom: 13px;
251  }
252
253  95% {
254    -webkit-transform: rotateZ(-410deg);
255    transform: rotateZ(-410deg);
256    right: 0;
257    bottom: 0;
258  }
259
260  100% {
261    -webkit-transform: rotateZ(-360deg);
262    transform: rotateZ(-360deg);
263    right: 0;
264    bottom: 0;
265  }
266}
267
268@-webkit-keyframes particles1 {
269  0% {
270    background-color: rgba(51, 51, 51,0);
271    -webkit-transform: rotateZ(35deg) translateY(0px);
272    transform: rotateZ(35deg) translateY(0px);
273  }
274
275  63% {
276    background-color: rgba(51, 51, 51,0);
277    -webkit-transform: rotateZ(35deg) translateY(0px);
278    transform: rotateZ(35deg) translateY(0px);
279  }
280
281  64% {
282    background-color: rgba(51, 51, 51,1);
283    -webkit-transform: rotateZ(35deg) translateY(0px);
284    transform: rotateZ(35deg) translateY(0px);
285  }
286
287  100% {
288    background-color: rgba(51, 51, 51,0);
289    -webkit-transform: rotateZ(35deg) translateY(-30px);
290    transform: rotateZ(35deg) translateY(-30px);
291  }
292}
293
294@-webkit-keyframes particles2 {
295  0% {
296    background-color: rgba(51, 51, 51,0);
297    -webkit-transform: rotateZ(-65deg) translateY(0px);
298    transform: rotateZ(-65deg) translateY(0px);
299  }
300
301  63% {
302    background-color: rgba(51, 51, 51,0);
303    -webkit-transform: rotateZ(-65deg) translateY(0px);
304    transform: rotateZ(-65deg) translateY(0px);
305  }
306
307  64% {
308    background-color: rgba(51, 51, 51,1);
309    -webkit-transform: rotateZ(-65deg) translateY(0px);
310    transform: rotateZ(-65deg) translateY(0px);
311  }
312
313  95% {
314    background-color: rgba(51, 51, 51,0);
315    -webkit-transform: rotateZ(-65deg) translateY(-40px);
316    transform: rotateZ(-65deg) translateY(-40px);
317  }
318
319  100% {
320    background-color: rgba(51, 51, 51,0);
321    -webkit-transform: rotateZ(-65deg) translateY(-40px);
322    transform: rotateZ(-65deg) translateY(-40px);
323  }
324}
325
326@-webkit-keyframes particles3 {
327  0% {
328    background-color: rgba(51, 51, 51,0);
329    -webkit-transform: rotateZ(-75deg) translateY(0px);
330    transform: rotateZ(-75deg) translateY(0px);
331  }
332
333  63% {
334    background-color: rgba(51, 51, 51,0);
335    -webkit-transform: rotateZ(-75deg) translateY(0px);
336    transform: rotateZ(-75deg) translateY(0px);
337  }
338
339  64% {
340    background-color: rgba(51, 51, 51,1);
341    -webkit-transform: rotateZ(-75deg) translateY(0px);
342    transform: rotateZ(-75deg) translateY(0px);
343  }
344
345  97% {
346    background-color: rgba(51, 51, 51,0);
347    -webkit-transform: rotateZ(-75deg) translateY(-35px);
348    transform: rotateZ(-75deg) translateY(-35px);
349  }
350
351  100% {
352    background-color: rgba(51, 51, 51,0);
353    -webkit-transform: rotateZ(-75deg) translateY(-35px);
354    transform: rotateZ(-75deg) translateY(-35px);
355  }
356}
357
358@-webkit-keyframes particles4 {
359  0% {
360    background-color: rgba(51, 51, 51,0);
361    -webkit-transform: rotateZ(-25deg) translateY(0px);
362    transform: rotateZ(-25deg) translateY(0px);
363  }
364
365  63% {
366    background-color: rgba(51, 51, 51,0);
367    -webkit-transform: rotateZ(-25deg) translateY(0px);
368    transform: rotateZ(-25deg) translateY(0px);
369  }
370
371  64% {
372    background-color: rgba(51, 51, 51,1);
373    -webkit-transform: rotateZ(-25deg) translateY(0px);
374    transform: rotateZ(-25deg) translateY(0px);
375  }
376
377  97% {
378    background-color: rgba(51, 51, 51,0);
379    -webkit-transform: rotateZ(-25deg) translateY(-30px);
380    transform: rotateZ(-25deg) translateY(-30px);
381  }
382
383  100% {
384    background-color: rgba(51, 51, 51,0);
385    -webkit-transform: rotateZ(-25deg) translateY(-30px);
386    transform: rotateZ(-25deg) translateY(-30px);
387  }
388}
389
390@-webkit-keyframes particles5 {
391  0% {
392    background-color: rgba(51, 51, 51,0);
393    -webkit-transform: rotateZ(65deg) translateY(0px);
394    transform: rotateZ(65deg) translateY(0px);
395  }
396
397  63% {
398    background-color: rgba(51, 51, 51,0);
399    -webkit-transform: rotateZ(65deg) translateY(0px);
400    transform: rotateZ(65deg) translateY(0px);
401  }
402
403  64% {
404    background-color: rgba(51, 51, 51,1);
405    -webkit-transform: rotateZ(65deg) translateY(0px);
406    transform: rotateZ(65deg) translateY(0px);
407  }
408
409  97% {
410    background-color: rgba(51, 51, 51,0);
411    -webkit-transform: rotateZ(65deg) translateY(-35px);
412    transform: rotateZ(65deg) translateY(-35px);
413  }
414
415  100% {
416    background-color: rgba(51, 51, 51,0);
417    -webkit-transform: rotateZ(65deg) translateY(-35px);
418    transform: rotateZ(65deg) translateY(-35px);
419  }
420}
421
422@keyframes showlightgreen {
423  0% {
424    max-height: 0;
425    box-shadow: 0 0 0 0 #87c054;
426  }
427
428  5% {
429    box-shadow: 0 0 4px 2px #87c054;
430  }
431
432  10% {
433    max-height: 22px;
434  }
435
436  80% {
437    max-height: 22px;
438  }
439
440  85% {
441    box-shadow: 0 0 4px 2px #87c054;
442  }
443
444  100% {
445    max-height: 0;
446    box-shadow: 0 0 0 0 #87c054;
447  }
448}
449
450@keyframes showlightred {
451  0% {
452    max-height: 0;
453    box-shadow: 0 0 0 0 #f06363;
454  }
455
456  20% {
457    box-shadow: 0 0 4px 2px #f06363;
458  }
459
460  25% {
461    max-height: 22px;
462  }
463
464  80% {
465    max-height: 22px;
466  }
467
468  85% {
469    box-shadow: 0 0 4px 2px #f06363;
470  }
471
472  100% {
473    max-height: 0;
474    box-shadow: 0 0 0 0 #f06363;
475  }
476}
477
478@keyframes fightleft {
479  0% {
480    -webkit-transform: rotateZ(0deg);
481    transform: rotateZ(0deg);
482    left: 0;
483    bottom: 0;
484  }
485
486  30% {
487    -webkit-transform: rotateZ(0deg);
488    transform: rotateZ(0deg);
489    bottom: 0;
490  }
491
492  40% {
493    -webkit-transform: rotateZ(45deg);
494    transform: rotateZ(45deg);
495    left: 0;
496    bottom: 2px;
497  }
498
499  45% {
500    -webkit-transform: rotateZ(65deg);
501    transform: rotateZ(65deg);
502    left: 0;
503  }
504
505  65% {
506    -webkit-transform: rotateZ(410deg);
507    transform: rotateZ(410deg);
508    left: 30px;
509    bottom: 10px;
510  }
511
512  95% {
513    -webkit-transform: rotateZ(410deg);
514    transform: rotateZ(410deg);
515    left: 0;
516    bottom: 0;
517  }
518
519  100% {
520    -webkit-transform: rotateZ(360deg);
521    transform: rotateZ(360deg);
522    left: 0;
523    bottom: 0;
524  }
525}
526
527@keyframes fightright {
528  0% {
529    -webkit-transform: rotateZ(0deg);
530    transform: rotateZ(0deg);
531    right: 0;
532    bottom: 0;
533  }
534
535  30% {
536    -webkit-transform: rotateZ(0deg);
537    transform: rotateZ(0deg);
538    bottom: 0;
539  }
540
541  45% {
542    -webkit-transform: rotateZ(-45deg);
543    transform: rotateZ(-45deg);
544    right: 0;
545    bottom: 2px;
546  }
547
548  50% {
549    -webkit-transform: rotateZ(-65deg);
550    transform: rotateZ(-65deg);
551    right: 0;
552  }
553
554  68% {
555    -webkit-transform: rotateZ(-410deg);
556    transform: rotateZ(-410deg);
557    right: 27px;
558    bottom: 13px;
559  }
560
561  95% {
562    -webkit-transform: rotateZ(-410deg);
563    transform: rotateZ(-410deg);
564    right: 0;
565    bottom: 0;
566  }
567
568  100% {
569    -webkit-transform: rotateZ(-360deg);
570    transform: rotateZ(-360deg);
571    right: 0;
572    bottom: 0;
573  }
574}
575
576@keyframes particles1 {
577  0% {
578    background-color: rgba(51, 51, 51,0);
579    -webkit-transform: rotateZ(35deg) translateY(0px);
580    transform: rotateZ(35deg) translateY(0px);
581  }
582
583  63% {
584    background-color: rgba(51, 51, 51,0);
585    -webkit-transform: rotateZ(35deg) translateY(0px);
586    transform: rotateZ(35deg) translateY(0px);
587  }
588
589  64% {
590    background-color: rgba(51, 51, 51,1);
591    -webkit-transform: rotateZ(35deg) translateY(0px);
592    transform: rotateZ(35deg) translateY(0px);
593  }
594
595  100% {
596    background-color: rgba(51, 51, 51,0);
597    -webkit-transform: rotateZ(35deg) translateY(-30px);
598    transform: rotateZ(35deg) translateY(-30px);
599  }
600}
601
602@keyframes particles2 {
603  0% {
604    background-color: rgba(51, 51, 51,0);
605    -webkit-transform: rotateZ(-65deg) translateY(0px);
606    transform: rotateZ(-65deg) translateY(0px);
607  }
608
609  63% {
610    background-color: rgba(51, 51, 51,0);
611    -webkit-transform: rotateZ(-65deg) translateY(0px);
612    transform: rotateZ(-65deg) translateY(0px);
613  }
614
615  64% {
616    background-color: rgba(51, 51, 51,1);
617    -webkit-transform: rotateZ(-65deg) translateY(0px);
618    transform: rotateZ(-65deg) translateY(0px);
619  }
620
621  95% {
622    background-color: rgba(51, 51, 51,0);
623    -webkit-transform: rotateZ(-65deg) translateY(-40px);
624    transform: rotateZ(-65deg) translateY(-40px);
625  }
626
627  100% {
628    background-color: rgba(51, 51, 51,0);
629    -webkit-transform: rotateZ(-65deg) translateY(-40px);
630    transform: rotateZ(-65deg) translateY(-40px);
631  }
632}
633
634@keyframes particles3 {
635  0% {
636    background-color: rgba(51, 51, 51,0);
637    -webkit-transform: rotateZ(-75deg) translateY(0px);
638    transform: rotateZ(-75deg) translateY(0px);
639  }
640
641  63% {
642    background-color: rgba(51, 51, 51,0);
643    -webkit-transform: rotateZ(-75deg) translateY(0px);
644    transform: rotateZ(-75deg) translateY(0px);
645  }
646
647  64% {
648    background-color: rgba(51, 51, 51,1);
649    -webkit-transform: rotateZ(-75deg) translateY(0px);
650    transform: rotateZ(-75deg) translateY(0px);
651  }
652
653  97% {
654    background-color: rgba(51, 51, 51,0);
655    -webkit-transform: rotateZ(-75deg) translateY(-35px);
656    transform: rotateZ(-75deg) translateY(-35px);
657  }
658
659  100% {
660    background-color: rgba(51, 51, 51,0);
661    -webkit-transform: rotateZ(-75deg) translateY(-35px);
662    transform: rotateZ(-75deg) translateY(-35px);
663  }
664}
665
666@keyframes particles4 {
667  0% {
668    background-color: rgba(51, 51, 51,0);
669    -webkit-transform: rotateZ(-25deg) translateY(0px);
670    transform: rotateZ(-25deg) translateY(0px);
671  }
672
673  63% {
674    background-color: rgba(51, 51, 51,0);
675    -webkit-transform: rotateZ(-25deg) translateY(0px);
676    transform: rotateZ(-25deg) translateY(0px);
677  }
678
679  64% {
680    background-color: rgba(51, 51, 51,1);
681    -webkit-transform: rotateZ(-25deg) translateY(0px);
682    transform: rotateZ(-25deg) translateY(0px);
683  }
684
685  97% {
686    background-color: rgba(51, 51, 51,0);
687    -webkit-transform: rotateZ(-25deg) translateY(-30px);
688    transform: rotateZ(-25deg) translateY(-30px);
689  }
690
691  100% {
692    background-color: rgba(51, 51, 51,0);
693    -webkit-transform: rotateZ(-25deg) translateY(-30px);
694    transform: rotateZ(-25deg) translateY(-30px);
695  }
696}
697
698@keyframes particles5 {
699  0% {
700    background-color: rgba(51, 51, 51,0);
701    -webkit-transform: rotateZ(65deg) translateY(0px);
702    transform: rotateZ(65deg) translateY(0px);
703  }
704
705  63% {
706    background-color: rgba(51, 51, 51,0);
707    -webkit-transform: rotateZ(65deg) translateY(0px);
708    transform: rotateZ(65deg) translateY(0px);
709  }
710
711  64% {
712    background-color: rgba(51, 51, 51,1);
713    -webkit-transform: rotateZ(65deg) translateY(0px);
714    transform: rotateZ(65deg) translateY(0px);
715  }
716
717  97% {
718    background-color: rgba(51, 51, 51,0);
719    -webkit-transform: rotateZ(65deg) translateY(-35px);
720    transform: rotateZ(65deg) translateY(-35px);
721  }
722
723  100% {
724    background-color: rgba(51, 51, 51,0);
725    -webkit-transform: rotateZ(65deg) translateY(-35px);
726    transform: rotateZ(65deg) translateY(-35px);
727  }
728}