1/* 3D tower loader made by: csozi | Website: www.csozi.hu*/
2
3.loader {
4  scale: 3;
5  height: 50px;
6  width: 40px;
7}
8
9.box {
10  position: relative;
11  opacity: 0;
12  left: 10px;
13}
14
15.side-left {
16  position: absolute;
17  background-color: #286cb5;
18  width: 19px;
19  height: 5px;
20  transform: skew(0deg, -25deg);
21  top: 14px;
22  left: 10px;
23}
24
25.side-right {
26  position: absolute;
27  background-color: #2f85e0;
28  width: 19px;
29  height: 5px;
30  transform: skew(0deg, 25deg);
31  top: 14px;
32  left: -9px;
33}
34
35.side-top {
36  position: absolute;
37  background-color: #5fa8f5;
38  width: 20px;
39  height: 20px;
40  rotate: 45deg;
41  transform: skew(-20deg, -20deg);
42}
43
44.box-1 {
45  animation: from-left 4s infinite;
46}
47
48.box-2 {
49  animation: from-right 4s infinite;
50  animation-delay: 1s;
51}
52
53.box-3 {
54  animation: from-left 4s infinite;
55  animation-delay: 2s;
56}
57
58.box-4 {
59  animation: from-right 4s infinite;
60  animation-delay: 3s;
61}
62
63@keyframes from-left {
64  0% {
65    z-index: 20;
66    opacity: 0;
67    translate: -20px -6px;
68  }
69
70  20% {
71    z-index: 10;
72    opacity: 1;
73    translate: 0px 0px;
74  }
75
76  40% {
77    z-index: 9;
78    translate: 0px 4px;
79  }
80
81  60% {
82    z-index: 8;
83    translate: 0px 8px;
84  }
85
86  80% {
87    z-index: 7;
88    opacity: 1;
89    translate: 0px 12px;
90  }
91
92  100% {
93    z-index: 5;
94    translate: 0px 30px;
95    opacity: 0;
96  }
97}
98
99@keyframes from-right {
100  0% {
101    z-index: 20;
102    opacity: 0;
103    translate: 20px -6px;
104  }
105
106  20% {
107    z-index: 10;
108    opacity: 1;
109    translate: 0px 0px;
110  }
111
112  40% {
113    z-index: 9;
114    translate: 0px 4px;
115  }
116
117  60% {
118    z-index: 8;
119    translate: 0px 8px;
120  }
121
122  80% {
123    z-index: 7;
124    opacity: 1;
125    translate: 0px 12px;
126  }
127
128  100% {
129    z-index: 5;
130    translate: 0px 30px;
131    opacity: 0;
132  }
133}