Loader by escannord

1.loader {
2  width: 220px;
3  height: 220px;
4  border-radius: 50%;
5  position: relative;
6  border: solid 5px transparent;
7  box-shadow: 5px 5px 5px rgb(12, 12, 12), inset 5px 5px 5px rgb(24, 23, 23),
8    inset -1px -1px 10px rgba(153, 148, 148, 0.432),
9    -1px -1px 10px rgba(206, 198, 198, 0.281);
10}
11
12.loader::before {
13  content: "";
14  display: inline-block;
15  position: absolute;
16  width: 180px;
17  height: 180px;
18  border-radius: 50%;
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%, -50%);
22  box-shadow: 5px 5px 20px black, -2px -2px 40px black;
23  background: repeating-conic-gradient(
24    rgb(61, 59, 59) 0%,
25    rgba(248, 248, 246, 0.534) 15%,
26    rgb(54, 52, 52) 33.33%
27  );
28}
29
30.ball {
31  width: 15px;
32  height: 15px;
33  display: inline-block;
34  background: radial-gradient(
35    circle at 5px 5px,
36    rgb(255, 255, 255) 1%,
37    rgb(5, 5, 5) 50%
38  );
39  border-radius: 50%;
40  position: absolute;
41  top: 50%;
42  left: 50%;
43  transform: translate(-50%, -50%) translateX(97.5px);
44  animation: rotate 5s calc(var(--delay) * 0.2s) infinite linear;
45}
46
47@keyframes rotate {
48  0% {
49    transform: translate(-50%, -50%) rotate(0deg) translateX(97.5px);
50  }
51
52  100% {
53    transform: translate(-50%, -50%) rotate(360deg) translateX(97.5px);
54  }
55}
56