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