1.loader {
2  position: absolute;
3  margin: auto;
4  top: 0;
5  bottom: 0;
6  left: 0;
7  right: 0;
8  width: 6.250em;
9  height: 6.250em;
10  animation: rotate5123 2.4s linear infinite;
11}
12
13.white {
14  top: 0;
15  bottom: 0;
16  left: 0;
17  right: 0;
18  background: white;
19  animation: flash 2.4s linear infinite;
20  opacity: 0;
21}
22
23.dot {
24  position: absolute;
25  margin: auto;
26  width: 2.4em;
27  height: 2.4em;
28  border-radius: 100%;
29  transition: all 1s ease;
30}
31
32.dot:nth-child(2) {
33  top: 0;
34  bottom: 0;
35  left: 0;
36  background: #FF4444;
37  animation: dotsY 2.4s linear infinite;
38}
39
40.dot:nth-child(3) {
41  left: 0;
42  right: 0;
43  top: 0;
44  background: #FFBB33;
45  animation: dotsX 2.4s linear infinite;
46}
47
48.dot:nth-child(4) {
49  top: 0;
50  bottom: 0;
51  right: 0;
52  background: #99CC00;
53  animation: dotsY 2.4s linear infinite;
54}
55
56.dot:nth-child(5) {
57  left: 0;
58  right: 0;
59  bottom: 0;
60  background: #33B5E5;
61  animation: dotsX 2.4s linear infinite;
62}
63
64@keyframes rotate5123 {
65  0% {
66    transform: rotate( 0 );
67  }
68
69  10% {
70    width: 6.250em;
71    height: 6.250em;
72  }
73
74  66% {
75    width: 2.4em;
76    height: 2.4em;
77  }
78
79  100% {
80    transform: rotate(360deg);
81    width: 6.250em;
82    height: 6.250em;
83  }
84}
85
86@keyframes dotsY {
87  66% {
88    opacity: .1;
89    width: 2.4em;
90  }
91
92  77% {
93    opacity: 1;
94    width: 0;
95  }
96}
97
98@keyframes dotsX {
99  66% {
100    opacity: .1;
101    height: 2.4em;
102  }
103
104  77% {
105    opacity: 1;
106    height: 0;
107  }
108}
109
110@keyframes flash {
111  33% {
112    opacity: 0;
113    border-radius: 0%;
114  }
115
116  55% {
117    opacity: .6;
118    border-radius: 100%;
119  }
120
121  66% {
122    opacity: 0;
123  }
124}
125