loader

CSS
01.loader {
02  --size: 250px;
03  --duration: 2s;
04  --logo-color: grey;
05  --background: linear-gradient(
06    0deg,
07    rgba(50, 50, 50, 0.2) 0%,
08    rgba(100, 100, 100, 0.2) 100%
09  );
10  height: var(--size);
11  aspect-ratio: 1;
12  position: relative;
13}
14
15.loader .box {
16  position: absolute;
17  background: rgba(100, 100, 100, 0.15);
18  background: var(--background);
19  border-radius: 50%;
20  border-top: 1px solid rgba(100, 100, 100, 1);
21  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
22  backdrop-filter: blur(5px);
23  animation: ripple var(--duration) infinite ease-in-out;
24}
25
26.loader .box:nth-child(1) {
27  inset: 40%;
28  z-index: 99;
29}
30
31.loader .box:nth-child(2) {
32  inset: 30%;
33  z-index: 98;
34  border-color: rgba(100, 100, 100, 0.8);
35  animation-delay: 0.2s;
36}
37
38.loader .box:nth-child(3) {
39  inset: 20%;
40  z-index: 97;
41  border-color: rgba(100, 100, 100, 0.6);
42  animation-delay: 0.4s;
43}
44
45.loader .box:nth-child(4) {
46  inset: 10%;
47  z-index: 96;
48  border-color: rgba(100, 100, 100, 0.4);
49  animation-delay: 0.6s;
50}
51
52.loader .box:nth-child(5) {
53  inset: 0%;
54  z-index: 95;
55  border-color: rgba(100, 100, 100, 0.2);
56  animation-delay: 0.8s;
57}
58
59.loader .logo {
60  position: absolute;
61  inset: 0;
62  display: grid;
63  place-content: center;
64  padding: 30%;
65}
66
67.loader .logo svg {
68  fill: var(--logo-color);
69  width: 100%;
70  animation: color-change var(--duration) infinite ease-in-out;
71}
72
73@keyframes ripple {
74  0% {
75    transform: scale(1);
76    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
77  }
78  50% {
79    transform: scale(1.3);
80    box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 20px -0px;
81  }
82  100% {
83    transform: scale(1);
84    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
85  }
86}
87
88@keyframes color-change {
89  0% {
90    fill: var(--logo-color);
91  }
92  50% {
93    fill: white;
94  }
95  100% {
96    fill: var(--logo-color);
97  }
98}