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