Loader by csemszepp

1.loader {
2  -webkit-perspective: 700px;
3  perspective: 700px;
4  background: red;
5  padding: 10px 20px;
6}
7
8.loader>span {
9  font-size: 60px;
10  font-family: "franklin gothic medium",sans-serif;
11  display: inline-block;
12  animation: flip 2.6s infinite linear;
13  transform-origin: 0 70%;
14  transform-style: preserve-3d;
15  -webkit-transform-style: preserve-3d;
16}
17
18@keyframes flip {
19  35% {
20    transform: rotatex(360deg);
21  }
22
23  100% {
24    transform: rotatex(360deg);
25  }
26}
27
28.loader>span:nth-child(even) {
29  color: white;
30}
31
32.loader>span:nth-child(2) {
33  animation-delay: 0.3s;
34}
35
36.loader>span:nth-child(3) {
37  animation-delay: 0.6s;
38}
39
40.loader>span:nth-child(4) {
41  animation-delay: 0.9s;
42}
43
44.loader>span:nth-child(5) {
45  animation-delay: 1.2s;
46}
47
48.loader>span:nth-child(6) {
49  animation-delay: 1.5s
50}
51
52.loader>span:nth-child(7) {
53  animation-delay: 1.8s
54}