1.loader {
2  display: flex;
3  align-items: center;
4  margin-left: -0.65em;
5}
6
7.load1 {
8  position: absolute;
9  content: "";
10  margin-right: 1em;
11  height: 1.2em;
12  width: 1.2em;
13  border-radius: 5px;
14  background-color: white;
15  box-shadow: 0 1px 7px rgba(0,0,0,0.3);
16}
17
18.load2 {
19  position: absolute;
20  margin-right: 1em;
21  content: "";
22  height: 1.2em;
23  width: 1.2em;
24  border-radius: 5px;
25  background-color: white;
26  animation: 2s flow2 infinite;
27}
28
29.load3 {
30  position: absolute;
31  margin-right: 1em;
32  content: "";
33  height: 1.2em;
34  width: 1.2em;
35  border-radius: 5px;
36  background-color: white;
37  animation: 2s flow3 infinite;
38}
39
40.load4 {
41  position: absolute;
42  margin-right: 1em;
43  content: "";
44  height: 1.2em;
45  width: 1.2em;
46  border-radius: 5px;
47  background-color: white;
48  animation: 2s flow4 infinite;
49}
50
51.load5 {
52  position: absolute;
53  margin-right: 1em;
54  content: "";
55  height: 1.2em;
56  width: 1.2em;
57  border-radius: 5px;
58  background-color: white;
59  animation: 2s flow5 infinite;
60}
61
62.load6 {
63  position: absolute;
64  margin-right: 1em;
65  content: "";
66  height: 1.2em;
67  width: 1.2em;
68  border-radius: 5px;
69  background-color: white;
70  animation: 6s flow6 infinite;
71}
72
73.load7 {
74  position: absolute;
75  margin-right: 1em;
76  content: "";
77  height: 1.2em;
78  width: 1.2em;
79  border-radius: 5px;
80  background-color: white;
81  animation: 6s flow7 infinite;
82}
83
84.load8 {
85  position: absolute;
86  margin-right: 1em;
87  content: "";
88  height: 1.2em;
89  width: 1.2em;
90  border-radius: 5px;
91  background-color: white;
92  animation: 6s flow8 infinite;
93}
94
95.load9 {
96  position: absolute;
97  content: "";
98  height: 1.2em;
99  width: 1.2em;
100  border-radius: 5px;
101  background-color: white;
102  animation: 6s flow9 infinite;
103}
104
105@keyframes flow2 {
106  50% {
107    transform: translateX(3em);
108    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
109  }
110
111  100% {
112    transform: translateX(0em);
113  }
114}
115
116@keyframes flow3 {
117  50% {
118    transform: translateX(-3em);
119    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
120  }
121
122  100% {
123    transform: translateX(0em);
124  }
125}
126
127@keyframes flow4 {
128  50% {
129    transform: translateY(3em);
130    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
131  }
132
133  100% {
134    transform: translateY(0em);
135  }
136}
137
138@keyframes flow5 {
139  50% {
140    transform: translateY(-3em);
141    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
142  }
143
144  100% {
145    transform: translateY(0em);
146  }
147}
148
149@keyframes flow6 {
150  30% {
151    transform: translateX(3em);
152    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
153  }
154
155  60% {
156    transform: translateX(3em) translateY(-3em);
157    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
158  }
159
160  100% {
161    transform: translateX(0em) translateY(0em);
162  }
163}
164
165@keyframes flow7 {
166  30% {
167    transform: translateX(-3em);
168    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
169  }
170
171  60% {
172    transform: translateX(-3em) translateY(3em);
173    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
174  }
175
176  100% {
177    transform: translateX(0em) translateY(0em);
178  }
179}
180
181@keyframes flow8 {
182  30% {
183    transform: translateY(3em);
184    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
185  }
186
187  60% {
188    transform: translateY(3em) translateX(3em);
189    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
190  }
191
192  100% {
193    transform: translateX(0em) translateY(0em);
194  }
195}
196
197@keyframes flow9 {
198  30% {
199    transform: translateY(-3em);
200    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
201  }
202
203  60% {
204    transform: translateY(-3em) translateX(-3em);
205    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
206  }
207
208  100% {
209    transform: translateX(0em) translateY(0em);
210  }
211}