1/* The loader container */
2.loader {
3  position: absolute;
4  top: 50%;
5  left: 50%;
6  width: 200px;
7  height: 100px;
8  margin-top: -100px;
9  margin-left: -100px;
10  perspective: 1000px;
11  transform-style: preserv3d;
12}
13
14.loader--reflect {
15  margin-top: 0;
16}
17
18.loader--reflect:after {
19  content: '';
20  position: absolute;
21  top: 0;
22  left: -25%;
23  width: 150%;
24  height: 110%;
25  background: linear-gradient(0deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 20%, rgba(238, 238, 238, 0.3));
26}
27
28
29/* The bar */
30.bar {
31  position: absolute;
32  bottom: 0;
33  left: 0;
34  width: 20px;
35  height: 100px;
36  background-color: #1e3f57;
37  transform: scaleY(0);
38  transform-style: preserve3d;
39  animation: bar 3s cubic-bezier(.81,.04,.4,.7) infinite;
40}
41
42.bar:nth-child(2) {
43  left: 20px;
44  background-color: #264a63;
45  animation-delay: 50ms;
46}
47
48.bar:nth-child(3) {
49  left: 40px;
50  background-color: #2d566f;
51  animation-delay: 100ms;
52}
53
54.bar:nth-child(4) {
55  left: 60px;
56  background-color: #35617a;
57  animation-delay: 150ms;
58}
59
60.bar:nth-child(5) {
61  left: 80px;
62  background-color: #3d6d86;
63  animation-delay: 200ms;
64}
65
66.bar:nth-child(6) {
67  left: 100px;
68  background-color: #447892;
69  animation-delay: 250ms;
70}
71
72.bar:nth-child(7) {
73  left: 120px;
74  background-color: #4c849e;
75  animation-delay: 300ms;
76}
77
78.bar:nth-child(8) {
79  left: 140px;
80  background-color: #548fa9;
81  animation-delay: 350ms;
82}
83
84.bar:nth-child(9) {
85  left: 160px;
86  background-color: #5c9bb5;
87  animation-delay: 400ms;
88}
89
90.bar:nth-child(10) {
91  left: 180px;
92  background-color: #63a6c1;
93  animation-delay: 450ms;
94}
95
96.loader--reflect .bar {
97  animation-name: bar-reflect;
98}
99
100@keyframes bar {
101  0% {
102    transform: rotateZ(-180deg) rotateX(-360deg);
103  }
104
105  75%,100% {
106    transform: rotateZ(0) rotateX(0);
107  }
108}
109
110@keyframes bar-reflect {
111  0% {
112    transform: rotateZ(180deg) rotateX(360deg);
113  }
114
115  75%,100% {
116    transform: rotateZ(0) rotateX(0);
117  }
118}