Loader by 3la2aAlbedawi

1.socket {
2  width: 200px;
3  height: 200px;
4  position: absolute;
5  left: 50%;
6  margin-left: -100px;
7  top: 50%;
8  margin-top: -100px;
9}
10
11.hex-brick {
12  background: violet;
13  width: 30px;
14  height: 17px;
15  position: absolute;
16  top: 5px;
17  animation-name: fade00;
18  animation-duration: 2s;
19  animation-iteration-count: infinite;
20  -webkit-animation-name: fade00;
21  -webkit-animation-duration: 2s;
22  -webkit-animation-iteration-count: infinite;
23}
24
25.h2 {
26  transform: rotate(60deg);
27  -webkit-transform: rotate(60deg);
28}
29
30.h3 {
31  transform: rotate(-60deg);
32  -webkit-transform: rotate(-60deg);
33}
34
35.gel {
36  height: 30px;
37  width: 30px;
38  transition: all 0.3s;
39  -webkit-transition: all 0.3s;
40  position: absolute;
41  top: 50%;
42  left: 50%;
43}
44
45.center-gel {
46  margin-left: -15px;
47  margin-top: -15px;
48  animation-name: pulse00;
49  animation-duration: 2s;
50  animation-iteration-count: infinite;
51  -webkit-animation-name: pulse00;
52  -webkit-animation-duration: 2s;
53  -webkit-animation-iteration-count: infinite;
54}
55
56.c1 {
57  margin-left: -47px;
58  margin-top: -15px;
59}
60
61.c2 {
62  margin-left: -31px;
63  margin-top: -43px;
64}
65
66.c3 {
67  margin-left: 1px;
68  margin-top: -43px;
69}
70
71.c4 {
72  margin-left: 17px;
73  margin-top: -15px;
74}
75
76.c5 {
77  margin-left: -31px;
78  margin-top: 13px;
79}
80
81.c6 {
82  margin-left: 1px;
83  margin-top: 13px;
84}
85
86.c7 {
87  margin-left: -63px;
88  margin-top: -43px;
89}
90
91.c8 {
92  margin-left: 33px;
93  margin-top: -43px;
94}
95
96.c9 {
97  margin-left: -15px;
98  margin-top: 41px;
99}
100
101.c10 {
102  margin-left: -63px;
103  margin-top: 13px;
104}
105
106.c11 {
107  margin-left: 33px;
108  margin-top: 13px;
109}
110
111.c12 {
112  margin-left: -15px;
113  margin-top: -71px;
114}
115
116.c13 {
117  margin-left: -47px;
118  margin-top: -71px;
119}
120
121.c14 {
122  margin-left: 17px;
123  margin-top: -71px;
124}
125
126.c15 {
127  margin-left: -47px;
128  margin-top: 41px;
129}
130
131.c16 {
132  margin-left: 17px;
133  margin-top: 41px;
134}
135
136.c17 {
137  margin-left: -79px;
138  margin-top: -15px;
139}
140
141.c18 {
142  margin-left: 49px;
143  margin-top: -15px;
144}
145
146.c19 {
147  margin-left: -63px;
148  margin-top: -99px;
149}
150
151.c20 {
152  margin-left: 33px;
153  margin-top: -99px;
154}
155
156.c21 {
157  margin-left: 1px;
158  margin-top: -99px;
159}
160
161.c22 {
162  margin-left: -31px;
163  margin-top: -99px;
164}
165
166.c23 {
167  margin-left: -63px;
168  margin-top: 69px;
169}
170
171.c24 {
172  margin-left: 33px;
173  margin-top: 69px;
174}
175
176.c25 {
177  margin-left: 1px;
178  margin-top: 69px;
179}
180
181.c26 {
182  margin-left: -31px;
183  margin-top: 69px;
184}
185
186.c27 {
187  margin-left: -79px;
188  margin-top: -15px;
189}
190
191.c28 {
192  margin-left: -95px;
193  margin-top: -43px;
194}
195
196.c29 {
197  margin-left: -95px;
198  margin-top: 13px;
199}
200
201.c30 {
202  margin-left: 49px;
203  margin-top: 41px;
204}
205
206.c31 {
207  margin-left: -79px;
208  margin-top: -71px;
209}
210
211.c32 {
212  margin-left: -111px;
213  margin-top: -15px;
214}
215
216.c33 {
217  margin-left: 65px;
218  margin-top: -43px;
219}
220
221.c34 {
222  margin-left: 65px;
223  margin-top: 13px;
224}
225
226.c35 {
227  margin-left: -79px;
228  margin-top: 41px;
229}
230
231.c36 {
232  margin-left: 49px;
233  margin-top: -71px;
234}
235
236.c37 {
237  margin-left: 81px;
238  margin-top: -15px;
239}
240
241.r1 {
242  animation-name: pulse00;
243  animation-duration: 2s;
244  animation-iteration-count: infinite;
245  animation-delay: 0.2s;
246  -webkit-animation-name: pulse00;
247  -webkit-animation-duration: 2s;
248  -webkit-animation-iteration-count: infinite;
249  -webkit-animation-delay: 0.2s;
250}
251
252.r2 {
253  animation-name: pulse00;
254  animation-duration: 2s;
255  animation-iteration-count: infinite;
256  animation-delay: 0.4s;
257  -webkit-animation-name: pulse00;
258  -webkit-animation-duration: 2s;
259  -webkit-animation-iteration-count: infinite;
260  -webkit-animation-delay: 0.4s;
261}
262
263.r3 {
264  animation-name: pulse00;
265  animation-duration: 2s;
266  animation-iteration-count: infinite;
267  animation-delay: 0.6s;
268  -webkit-animation-name: pulse00;
269  -webkit-animation-duration: 2s;
270  -webkit-animation-iteration-count: infinite;
271  -webkit-animation-delay: 0.6s;
272}
273
274.r1 > .hex-brick {
275  animation-name: fade00;
276  animation-duration: 2s;
277  animation-iteration-count: infinite;
278  animation-delay: 0.2s;
279  -webkit-animation-name: fade00;
280  -webkit-animation-duration: 2s;
281  -webkit-animation-iteration-count: infinite;
282  -webkit-animation-delay: 0.2s;
283}
284
285.r2 > .hex-brick {
286  animation-name: fade00;
287  animation-duration: 2s;
288  animation-iteration-count: infinite;
289  animation-delay: 0.4s;
290  -webkit-animation-name: fade00;
291  -webkit-animation-duration: 2s;
292  -webkit-animation-iteration-count: infinite;
293  -webkit-animation-delay: 0.4s;
294}
295
296.r3 > .hex-brick {
297  animation-name: fade00;
298  animation-duration: 2s;
299  animation-iteration-count: infinite;
300  animation-delay: 0.6s;
301  -webkit-animation-name: fade00;
302  -webkit-animation-duration: 2s;
303  -webkit-animation-iteration-count: infinite;
304  -webkit-animation-delay: 0.6s;
305}
306
307@keyframes pulse00 {
308  0% {
309    -webkit-transform: scale(1);
310    transform: scale(1);
311  }
312
313  50% {
314    -webkit-transform: scale(0.01);
315    transform: scale(0.01);
316  }
317
318  100% {
319    -webkit-transform: scale(1);
320    transform: scale(1);
321  }
322}
323
324@keyframes fade00 {
325  0% {
326    background: rgb(228, 0, 228);
327  }
328
329  50% {
330    background: red;
331  }
332
333  100% {
334    background: violet;
335  }
336}
337