1.loader {
2  width: 130px;
3  height: 170px;
4  position: relative;
5  font-family: inherit;
6}
7
8.loader::before, .loader::after {
9  content: "";
10  width: 0;
11  height: 0;
12  position: absolute;
13  bottom: 30px;
14  left: 15px;
15  z-index: 1;
16  border-left: 50px solid transparent;
17  border-right: 50px solid transparent;
18  border-bottom: 20px solid #1b2a33;
19  transform: scale(0);
20  transition: all 0.2s ease;
21}
22
23.loader::after {
24  border-right: 15px solid transparent;
25  border-bottom: 20px solid #162229;
26}
27
28.loader .getting-there {
29  width: 120%;
30  text-align: center;
31  position: absolute;
32  bottom: 0;
33  left: -7%;
34  font-size: 12px;
35  letter-spacing: 2px;
36  color: white;
37}
38
39.loader .binary {
40  width: 100%;
41  height: 140px;
42  display: block;
43  color: white;
44  position: absolute;
45  top: 0;
46  left: 15px;
47  z-index: 2;
48  overflow: hidden;
49}
50
51.loader .binary::before, .loader .binary::after {
52  font-family: "Lato";
53  font-size: 24px;
54  position: absolute;
55  top: 0;
56  left: 0;
57  opacity: 0;
58}
59
60.loader .binary:nth-child(1)::before {
61  content: "0";
62  animation: a 1.1s linear infinite;
63}
64
65.loader .binary:nth-child(1)::after {
66  content: "0";
67  animation: b 1.3s linear infinite;
68}
69
70.loader .binary:nth-child(2)::before {
71  content: "1";
72  animation: c 0.9s linear infinite;
73}
74
75.loader .binary:nth-child(2)::after {
76  content: "1";
77  animation: d 0.7s linear infinite;
78}
79
80.loader.JS_on::before, .loader.JS_on::after {
81  transform: scale(1);
82}
83
84@keyframes a {
85  0% {
86    transform: translate(30px, 0) rotate(30deg);
87    opacity: 0;
88  }
89
90  100% {
91    transform: translate(30px, 150px) rotate(-50deg);
92    opacity: 1;
93  }
94}
95
96@keyframes b {
97  0% {
98    transform: translate(50px, 0) rotate(-40deg);
99    opacity: 0;
100  }
101
102  100% {
103    transform: translate(40px, 150px) rotate(80deg);
104    opacity: 1;
105  }
106}
107
108@keyframes c {
109  0% {
110    transform: translate(70px, 0) rotate(10deg);
111    opacity: 0;
112  }
113
114  100% {
115    transform: translate(60px, 150px) rotate(70deg);
116    opacity: 1;
117  }
118}
119
120@keyframes d {
121  0% {
122    transform: translate(30px, 0) rotate(-50deg);
123    opacity: 0;
124  }
125
126  100% {
127    transform: translate(45px, 150px) rotate(30deg);
128    opacity: 1;
129  }
130}
131