Loader by adamgiebl

1.loader {
2  position: relative;
3  width: 150px;
4  height: 150px;
5  background: transparent;
6  border-radius: 50%;
7  box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.55);
8  border: 1px solid #333;
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  overflow: hidden;
13}
14
15.loader::before {
16  content: "";
17  position: absolute;
18  inset: 20px;
19  background: transparent;
20  border: 1px dashed #444;
21  border-radius: 50%;
22  box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),
23      inset 5px 5px 35px rgba(0, 0, 0, 0.25);
24}
25
26.loader::after {
27  content: "";
28  position: absolute;
29  width: 50px;
30  height: 50px;
31  border-radius: 50%;
32  border: 1px dashed #444;
33  box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),
34      inset 5px 5px 35px rgba(0, 0, 0, 0.25);
35}
36
37.loader span {
38  position: absolute;
39  top: 50%;
40  left: 50%;
41  width: 50%;
42  height: 100%;
43  background: transparent;
44  transform-origin: top left;
45  animation: radar81 2s linear infinite;
46  border-top: 1px dashed #e8a87c;
47}
48
49.loader span::before {
50  content: "";
51  position: absolute;
52  top: 0;
53  left: 0;
54  width: 100%;
55  height: 100%;
56  background: #7400b8;
57  transform-origin: top left;
58  transform: rotate(-55deg);
59  filter: blur(30px) drop-shadow(20px 20px 20px #7400b8);
60}
61
62@keyframes radar81 {
63  0% {
64    transform: rotate(0deg);
65  }
66
67  100% {
68    transform: rotate(360deg);
69  }
70}