Loader by bek_uz_time

1.loader {
2  position: relative;
3  width: 150px;
4  height: 150px;
5  background: transparent;
6  border-radius: 30%;
7  box-shadow: 25px 25px 75px rgba(0, 0, 0, 1.55);
8  border: 1px solid #ecc904;
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 #b0a1a1;
21  border-radius: 30%;
22  box-shadow: inset -5px -5px 25px rgba(0, 10, 10, 15),
23    inset 5px 5px 35px rgba(10, 0, 10, 2);
24}
25
26.loader::after {
27  content: "";
28  position: absolute;
29  width: 50px;
30  height: 50px;
31  border-radius: 30%;
32  border: 1px dashed #d6d3d3;
33  box-shadow: inset -5px -5px 25px rgba(10, 10, 10, 2.25),
34    inset 5px 5px 35px rgba(10, 10, 10, 10.45);
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 1s linear infinite;
46  border-top: 1px dashed #c1bdbd;
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: #f20303;
57  /* pink */
58  transform-origin: top left;
59  transform: rotate(-55deg);
60  filter: blur(30px) drop-shadow(20px 20px 20px #ff0241);
61  /* pink */
62}
63
64@keyframes radar81 {
65  0% {
66    transform: rotate(0deg);
67  }
68
69  100% {
70    transform: rotate(360deg);
71  }
72}
73