1.loader {
2  position: relative;
3  width: 160px;
4  height: 160px;
5  border: 4px solid #282828;
6  overflow: hidden;
7  border-radius: 50%;
8  box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),
9    10px 10px 10px rgba(0, 0, 0, 0.4),
10    inset -5px -5px 5px rgba(255, 255, 255, 0.2),
11    inset 10px 10px 10px rgba(0, 0, 0, 0.4);
12}
13
14.loader:before {
15  content: "";
16  position: absolute;
17  top: 25px;
18  left: 25px;
19  right: 25px;
20  bottom: 25px;
21  z-index: 10;
22  background: #212121;
23  border-radius: 50%;
24  border: 2px solid #292929;
25  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2),
26    inset 3px 3px 5px rgba(0, 0, 0, 0.5);
27}
28
29.loader span {
30  position: absolute;
31  width: 100%;
32  height: 100%;
33  border-radius: 50%;
34  background-image: linear-gradient(
35    -225deg,
36    #ff7402 0%,
37    #ffe700 50%,
38    #fff55e 100%
39  );
40  filter: blur(20px);
41  z-index: -1;
42  animation: animate 0.5s linear infinite, hue 3s linear infinite;
43}
44
45@keyframes animate {
46  0% {
47    transform: rotate(0deg);
48  }
49
50  100% {
51    transform: rotate(360deg);
52  }
53}
54
55@keyframes hue {
56  0% {
57    filter: hue-rotate(0deg);
58  }
59
60  100% {
61    filter: hue-rotate(360deg);
62  }
63}
64
65  
66