Loader by Smit-Prajapati

1.loader {
2  width: 120px;
3  aspect-ratio: 1;
4  background: #bcbcbc;
5  border-radius: 50%;
6  position: relative;
7  padding: 4px;
8  box-shadow: 2px 2px 5px 0px rgb(255, 255, 255), -2px -2px 5px -2px rgb(0, 0, 0);
9}
10
11.loader .dots-container {
12  width: 100%;
13  height: 100%;
14  position: relative;
15}
16
17.loader .dots-container .dot-row {
18  position: absolute;
19  top: 50%;
20  transform: translateY(-50%) rotate(0deg);
21  transform-origin: right center;
22  width: 50%;
23  height: 5px;
24  display: flex;
25  align-items: center;
26  justify-content: space-between;
27}
28
29.loader .dots-container .dot-row > * {
30  animation: blink 2s linear infinite;
31}
32
33.loader .dots-container .dot-row .dot {
34  width: 4%;
35  aspect-ratio: 1;
36  background: #8b8b8b;
37  border-radius: 50%;
38  box-shadow: 0px 0px 5px 0px rgb(255, 255, 255);
39}
40
41.loader .dots-container .dot-row:nth-child(1) {
42  transform: translateY(-50%) rotate(0deg);
43}
44
45.loader .dots-container .dot-row:nth-child(1) .dot {
46  animation-delay: 0s;
47}
48
49.loader .dots-container .dot-row:nth-child(2) {
50  transform: translateY(-50%) rotate(8deg);
51}
52
53.loader .dots-container .dot-row:nth-child(2) .dot {
54  animation-delay: 0.0444444444s;
55}
56
57.loader .dots-container .dot-row:nth-child(3) {
58  transform: translateY(-50%) rotate(16deg);
59}
60
61.loader .dots-container .dot-row:nth-child(3) .dot {
62  animation-delay: 0.0888888889s;
63}
64
65.loader .dots-container .dot-row:nth-child(4) {
66  transform: translateY(-50%) rotate(24deg);
67}
68
69.loader .dots-container .dot-row:nth-child(4) .dot {
70  animation-delay: 0.1333333333s;
71}
72
73.loader .dots-container .dot-row:nth-child(5) {
74  transform: translateY(-50%) rotate(32deg);
75}
76
77.loader .dots-container .dot-row:nth-child(5) .dot {
78  animation-delay: 0.1777777778s;
79}
80
81.loader .dots-container .dot-row:nth-child(6) {
82  transform: translateY(-50%) rotate(40deg);
83}
84
85.loader .dots-container .dot-row:nth-child(6) .dot {
86  animation-delay: 0.2222222222s;
87}
88
89.loader .dots-container .dot-row:nth-child(7) {
90  transform: translateY(-50%) rotate(48deg);
91}
92
93.loader .dots-container .dot-row:nth-child(7) .dot {
94  animation-delay: 0.2666666667s;
95}
96
97.loader .dots-container .dot-row:nth-child(8) {
98  transform: translateY(-50%) rotate(56deg);
99}
100
101.loader .dots-container .dot-row:nth-child(8) .dot {
102  animation-delay: 0.3111111111s;
103}
104
105.loader .dots-container .dot-row:nth-child(9) {
106  transform: translateY(-50%) rotate(64deg);
107}
108
109.loader .dots-container .dot-row:nth-child(9) .dot {
110  animation-delay: 0.3555555556s;
111}
112
113.loader .dots-container .dot-row:nth-child(10) {
114  transform: translateY(-50%) rotate(72deg);
115}
116
117.loader .dots-container .dot-row:nth-child(10) .dot {
118  animation-delay: 0.4s;
119}
120
121.loader .dots-container .dot-row:nth-child(11) {
122  transform: translateY(-50%) rotate(80deg);
123}
124
125.loader .dots-container .dot-row:nth-child(11) .dot {
126  animation-delay: 0.4444444444s;
127}
128
129.loader .dots-container .dot-row:nth-child(12) {
130  transform: translateY(-50%) rotate(88deg);
131}
132
133.loader .dots-container .dot-row:nth-child(12) .dot {
134  animation-delay: 0.4888888889s;
135}
136
137.loader .dots-container .dot-row:nth-child(13) {
138  transform: translateY(-50%) rotate(96deg);
139}
140
141.loader .dots-container .dot-row:nth-child(13) .dot {
142  animation-delay: 0.5333333333s;
143}
144
145.loader .dots-container .dot-row:nth-child(14) {
146  transform: translateY(-50%) rotate(104deg);
147}
148
149.loader .dots-container .dot-row:nth-child(14) .dot {
150  animation-delay: 0.5777777778s;
151}
152
153.loader .dots-container .dot-row:nth-child(15) {
154  transform: translateY(-50%) rotate(112deg);
155}
156
157.loader .dots-container .dot-row:nth-child(15) .dot {
158  animation-delay: 0.6222222222s;
159}
160
161.loader .dots-container .dot-row:nth-child(16) {
162  transform: translateY(-50%) rotate(120deg);
163}
164
165.loader .dots-container .dot-row:nth-child(16) .dot {
166  animation-delay: 0.6666666667s;
167}
168
169.loader .dots-container .dot-row:nth-child(17) {
170  transform: translateY(-50%) rotate(128deg);
171}
172
173.loader .dots-container .dot-row:nth-child(17) .dot {
174  animation-delay: 0.7111111111s;
175}
176
177.loader .dots-container .dot-row:nth-child(18) {
178  transform: translateY(-50%) rotate(136deg);
179}
180
181.loader .dots-container .dot-row:nth-child(18) .dot {
182  animation-delay: 0.7555555556s;
183}
184
185.loader .dots-container .dot-row:nth-child(19) {
186  transform: translateY(-50%) rotate(144deg);
187}
188
189.loader .dots-container .dot-row:nth-child(19) .dot {
190  animation-delay: 0.8s;
191}
192
193.loader .dots-container .dot-row:nth-child(20) {
194  transform: translateY(-50%) rotate(152deg);
195}
196
197.loader .dots-container .dot-row:nth-child(20) .dot {
198  animation-delay: 0.8444444444s;
199}
200
201.loader .dots-container .dot-row:nth-child(21) {
202  transform: translateY(-50%) rotate(160deg);
203}
204
205.loader .dots-container .dot-row:nth-child(21) .dot {
206  animation-delay: 0.8888888889s;
207}
208
209.loader .dots-container .dot-row:nth-child(22) {
210  transform: translateY(-50%) rotate(168deg);
211}
212
213.loader .dots-container .dot-row:nth-child(22) .dot {
214  animation-delay: 0.9333333333s;
215}
216
217.loader .dots-container .dot-row:nth-child(23) {
218  transform: translateY(-50%) rotate(176deg);
219}
220
221.loader .dots-container .dot-row:nth-child(23) .dot {
222  animation-delay: 0.9777777778s;
223}
224
225.loader .dots-container .dot-row:nth-child(24) {
226  transform: translateY(-50%) rotate(184deg);
227}
228
229.loader .dots-container .dot-row:nth-child(24) .dot {
230  animation-delay: 1.0222222222s;
231}
232
233.loader .dots-container .dot-row:nth-child(25) {
234  transform: translateY(-50%) rotate(192deg);
235}
236
237.loader .dots-container .dot-row:nth-child(25) .dot {
238  animation-delay: 1.0666666667s;
239}
240
241.loader .dots-container .dot-row:nth-child(26) {
242  transform: translateY(-50%) rotate(200deg);
243}
244
245.loader .dots-container .dot-row:nth-child(26) .dot {
246  animation-delay: 1.1111111111s;
247}
248
249.loader .dots-container .dot-row:nth-child(27) {
250  transform: translateY(-50%) rotate(208deg);
251}
252
253.loader .dots-container .dot-row:nth-child(27) .dot {
254  animation-delay: 1.1555555556s;
255}
256
257.loader .dots-container .dot-row:nth-child(28) {
258  transform: translateY(-50%) rotate(216deg);
259}
260
261.loader .dots-container .dot-row:nth-child(28) .dot {
262  animation-delay: 1.2s;
263}
264
265.loader .dots-container .dot-row:nth-child(29) {
266  transform: translateY(-50%) rotate(224deg);
267}
268
269.loader .dots-container .dot-row:nth-child(29) .dot {
270  animation-delay: 1.2444444444s;
271}
272
273.loader .dots-container .dot-row:nth-child(30) {
274  transform: translateY(-50%) rotate(232deg);
275}
276
277.loader .dots-container .dot-row:nth-child(30) .dot {
278  animation-delay: 1.2888888889s;
279}
280
281.loader .dots-container .dot-row:nth-child(31) {
282  transform: translateY(-50%) rotate(240deg);
283}
284
285.loader .dots-container .dot-row:nth-child(31) .dot {
286  animation-delay: 1.3333333333s;
287}
288
289.loader .dots-container .dot-row:nth-child(32) {
290  transform: translateY(-50%) rotate(248deg);
291}
292
293.loader .dots-container .dot-row:nth-child(32) .dot {
294  animation-delay: 1.3777777778s;
295}
296
297.loader .dots-container .dot-row:nth-child(33) {
298  transform: translateY(-50%) rotate(256deg);
299}
300
301.loader .dots-container .dot-row:nth-child(33) .dot {
302  animation-delay: 1.4222222222s;
303}
304
305.loader .dots-container .dot-row:nth-child(34) {
306  transform: translateY(-50%) rotate(264deg);
307}
308
309.loader .dots-container .dot-row:nth-child(34) .dot {
310  animation-delay: 1.4666666667s;
311}
312
313.loader .dots-container .dot-row:nth-child(35) {
314  transform: translateY(-50%) rotate(272deg);
315}
316
317.loader .dots-container .dot-row:nth-child(35) .dot {
318  animation-delay: 1.5111111111s;
319}
320
321.loader .dots-container .dot-row:nth-child(36) {
322  transform: translateY(-50%) rotate(280deg);
323}
324
325.loader .dots-container .dot-row:nth-child(36) .dot {
326  animation-delay: 1.5555555556s;
327}
328
329.loader .dots-container .dot-row:nth-child(37) {
330  transform: translateY(-50%) rotate(288deg);
331}
332
333.loader .dots-container .dot-row:nth-child(37) .dot {
334  animation-delay: 1.6s;
335}
336
337.loader .dots-container .dot-row:nth-child(38) {
338  transform: translateY(-50%) rotate(296deg);
339}
340
341.loader .dots-container .dot-row:nth-child(38) .dot {
342  animation-delay: 1.6444444444s;
343}
344
345.loader .dots-container .dot-row:nth-child(39) {
346  transform: translateY(-50%) rotate(304deg);
347}
348
349.loader .dots-container .dot-row:nth-child(39) .dot {
350  animation-delay: 1.6888888889s;
351}
352
353.loader .dots-container .dot-row:nth-child(40) {
354  transform: translateY(-50%) rotate(312deg);
355}
356
357.loader .dots-container .dot-row:nth-child(40) .dot {
358  animation-delay: 1.7333333333s;
359}
360
361.loader .dots-container .dot-row:nth-child(41) {
362  transform: translateY(-50%) rotate(320deg);
363}
364
365.loader .dots-container .dot-row:nth-child(41) .dot {
366  animation-delay: 1.7777777778s;
367}
368
369.loader .dots-container .dot-row:nth-child(42) {
370  transform: translateY(-50%) rotate(328deg);
371}
372
373.loader .dots-container .dot-row:nth-child(42) .dot {
374  animation-delay: 1.8222222222s;
375}
376
377.loader .dots-container .dot-row:nth-child(43) {
378  transform: translateY(-50%) rotate(336deg);
379}
380
381.loader .dots-container .dot-row:nth-child(43) .dot {
382  animation-delay: 1.8666666667s;
383}
384
385.loader .dots-container .dot-row:nth-child(44) {
386  transform: translateY(-50%) rotate(344deg);
387}
388
389.loader .dots-container .dot-row:nth-child(44) .dot {
390  animation-delay: 1.9111111111s;
391}
392
393.loader .dots-container .dot-row:nth-child(45) {
394  transform: translateY(-50%) rotate(352deg);
395}
396
397.loader .dots-container .dot-row:nth-child(45) .dot {
398  animation-delay: 1.9555555556s;
399}
400
401.loader .center-div {
402  position: absolute;
403  top: 50%;
404  left: 50%;
405  transform: translate(-50%, -50%);
406  width: 36%;
407  aspect-ratio: 1;
408  border-radius: 50%;
409  display: grid;
410  place-content: center;
411  background: linear-gradient(135deg, rgb(130, 130, 130) 0%, rgb(73, 73, 73) 100%);
412  box-shadow: rgba(39, 39, 39, 0.3) 8px 8px 5px -5px, rgba(39, 39, 39, 0.5) 8px 8px 10px 0px;
413  border-right: 1px solid rgb(63, 63, 63);
414  border-bottom: 1px solid rgb(63, 63, 63);
415}
416
417.loader .center-div .svg {
418  width: 15px;
419  aspect-ratio: 1;
420  fill: rgba(0, 0, 0, 0.293);
421}
422
423.loader .glass {
424  position: absolute;
425  height: 50%;
426  width: 80%;
427  top: 0;
428  left: 50%;
429  transform: translateX(-50%) rotate(-45deg);
430  transform-origin: bottom center;
431  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.879) 100%);
432  border-radius: inherit;
433  border-radius: 51% 49% 51% 49%/59% 60% 40% 41%;
434}
435
436@keyframes blink {
437  0% {
438    background: white;
439    box-shadow: 0px 0px 2px rgb(255, 255, 255);
440  }
441
442  20% {
443    background: white;
444  }
445
446  70% {
447    background: grey;
448    box-shadow: 0px 0px 2px rgba(255, 255, 255, 0);
449  }
450}