1.loader {
2  position: relative;
3  margin: auto;
4  box-sizing: border-box;
5  background-clip: padding-box;
6  width: 200px;
7  height: 200px;
8  border-radius: 50%;
9  border: 4px solid rgba(255, 255, 255, 0.1);
10  -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24,0.9) 90%);
11  transform-origin: 50% 60%;
12  transform: perspective(200px) rotateX(66deg);
13}
14
15.loader:before, .loader:after {
16  content: "";
17  position: absolute;
18  margin: -4px;
19  box-sizing: inherit;
20  width: inherit;
21  height: inherit;
22  border-radius: inherit;
23  opacity: 0.05;
24  border: inherit;
25  border-color: transparent;
26  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
27}
28
29.loader:before {
30  border-top-color: #66e6ff;
31}
32
33.loader:after {
34  border-top-color: #f0db75;
35  animation-delay: 0.3s;
36}
37
38@keyframes spinner-spin {
39  100% {
40    transform: rotate(360deg);
41  }
42}
43
44@keyframes spinner-fade {
45  20% {
46    opacity: 0.1;
47  }
48
49  40% {
50    opacity: 1;
51  }
52
53  60% {
54    opacity: 0.1;
55  }
56}
57