1.loader {
2  position: relative;
3  font-size: 16px;
4  width: 5.5em;
5  height: 5.5em;
6}
7
8.loader:before {
9  content: '';
10  position: absolute;
11  transform: translate(-50%, -50%) rotate(45deg);
12  height: 100%;
13  width: 4px;
14  background: #fff;
15  left: 50%;
16  top: 50%;
17}
18
19.loader:after {
20  content: '';
21  position: absolute;
22  left: 0.2em;
23  bottom: 0.18em;
24  width: 1em;
25  height: 1em;
26  background-color: orange;
27  border-radius: 15%;
28  animation: rollingRock 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
29}
30
31@keyframes rollingRock {
32  0% {
33    transform: translate(0, -1em) rotate(-45deg)
34  }
35
36  5% {
37    transform: translate(0, -1em) rotate(-50deg)
38  }
39
40  20% {
41    transform: translate(1em, -2em) rotate(47deg)
42  }
43
44  25% {
45    transform: translate(1em, -2em) rotate(45deg)
46  }
47
48  30% {
49    transform: translate(1em, -2em) rotate(40deg)
50  }
51
52  45% {
53    transform: translate(2em, -3em) rotate(137deg)
54  }
55
56  50% {
57    transform: translate(2em, -3em) rotate(135deg)
58  }
59
60  55% {
61    transform: translate(2em, -3em) rotate(130deg)
62  }
63
64  70% {
65    transform: translate(3em, -4em) rotate(217deg)
66  }
67
68  75% {
69    transform: translate(3em, -4em) rotate(220deg)
70  }
71
72  100% {
73    transform: translate(0, -1em) rotate(-225deg)
74  }
75}
76