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