1.spinner {
2 border: 0 solid transparent;
3 border-radius: 50%;
4 width: 50px;
5 height: 50px;
6}
7
8.loader {
9 width: inherit;
10 height: inherit;
11 position: absolute;
12}
13
14.loader::before,
15.loader::after {
16 content: '';
17 border: 3px solid #505065;
18 border-radius: 50%;
19 width: inherit;
20 height: inherit;
21 position: absolute;
22 opacity: 1;
23}
24
25.l1::before,
26.l1::after {
27 animation: clockwiseZ 2.5s infinite;
28}
29
30.l2::after,
31.l2::before {
32 animation: anticlockwiseZ 2.5s infinite;
33}
34
35@keyframes clockwiseZ {
36 0%, 100% {
37  transform: rotateY(0);
38 }
39
40 50% {
41  transform: rotateY(180deg) skew(-10deg, -5deg);
42 }
43}
44
45@keyframes anticlockwiseZ {
46 0%, 100% {
47  transform: rotateX(0);
48 }
49
50 50% {
51  transform: rotateX(-180deg) skew(10deg, 5deg);
52 }
53}