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 #fff;
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: #fc5185;
57 /* pink */
58  transform-origin: top left;
59  transform: rotate(-55deg);
60  filter: blur(30px) drop-shadow(20px 20px 20px #fc5185);
61 /* pink */
62}
63
64@keyframes radar81 {
65  0% {
66    transform: rotate(0deg);
67  }
68
69  100% {
70    transform: rotate(360deg);
71  }
72}