1 
 2<div class="loader">
 3  <span><span></span><span></span><span></span><span></span></span>
 4  <div class="base">
 5    <span></span>
 6    <div class="face"></div>
 7  </div>
 8</div>
 9<div class="longfazers">
10  <span></span><span></span><span></span><span></span>
11</div>          

  1 
  2.loader {
  3  position: absolute;
  4  top: 50%;
  5  margin-left: -50px;
  6  left: 50%;
  7  animation: speeder 0.4s linear infinite;
  8}
  9.loader > span {
 10  height: 5px;
 11  width: 35px;
 12  background: #000;
 13  position: absolute;
 14  top: -19px;
 15  left: 60px;
 16  border-radius: 2px 10px 1px 0;
 17}
 18.base span {
 19  position: absolute;
 20  width: 0;
 21  height: 0;
 22  border-top: 6px solid transparent;
 23  border-right: 100px solid #000;
 24  border-bottom: 6px solid transparent;
 25}
 26.base span:before {
 27  content: "";
 28  height: 22px;
 29  width: 22px;
 30  border-radius: 50%;
 31  background: #000;
 32  position: absolute;
 33  right: -110px;
 34  top: -16px;
 35}
 36.base span:after {
 37  content: "";
 38  position: absolute;
 39  width: 0;
 40  height: 0;
 41  border-top: 0 solid transparent;
 42  border-right: 55px solid #000;
 43  border-bottom: 16px solid transparent;
 44  top: -16px;
 45  right: -98px;
 46}
 47.face {
 48  position: absolute;
 49  height: 12px;
 50  width: 20px;
 51  background: #000;
 52  border-radius: 20px 20px 0 0;
 53  transform: rotate(-40deg);
 54  right: -125px;
 55  top: -15px;
 56}
 57.face:after {
 58  content: "";
 59  height: 12px;
 60  width: 12px;
 61  background: #000;
 62  right: 4px;
 63  top: 7px;
 64  position: absolute;
 65  transform: rotate(40deg);
 66  transform-origin: 50% 50%;
 67  border-radius: 0 0 0 2px;
 68}
 69.loader > span > span:nth-child(1),
 70.loader > span > span:nth-child(2),
 71.loader > span > span:nth-child(3),
 72.loader > span > span:nth-child(4) {
 73  width: 30px;
 74  height: 1px;
 75  background: #000;
 76  position: absolute;
 77  animation: fazer1 0.2s linear infinite;
 78}
 79.loader > span > span:nth-child(2) {
 80  top: 3px;
 81  animation: fazer2 0.4s linear infinite;
 82}
 83.loader > span > span:nth-child(3) {
 84  top: 1px;
 85  animation: fazer3 0.4s linear infinite;
 86  animation-delay: -1s;
 87}
 88.loader > span > span:nth-child(4) {
 89  top: 4px;
 90  animation: fazer4 1s linear infinite;
 91  animation-delay: -1s;
 92}
 93@keyframes fazer1 {
 94  0% {
 95    left: 0;
 96  }
 97  100% {
 98    left: -80px;
 99    opacity: 0;
100  }
101}
102@keyframes fazer2 {
103  0% {
104    left: 0;
105  }
106  100% {
107    left: -100px;
108    opacity: 0;
109  }
110}
111@keyframes fazer3 {
112  0% {
113    left: 0;
114  }
115  100% {
116    left: -50px;
117    opacity: 0;
118  }
119}
120@keyframes fazer4 {
121  0% {
122    left: 0;
123  }
124  100% {
125    left: -150px;
126    opacity: 0;
127  }
128}
129@keyframes speeder {
130  0% {
131    transform: translate(2px, 1px) rotate(0deg);
132  }
133  10% {
134    transform: translate(-1px, -3px) rotate(-1deg);
135  }
136  20% {
137    transform: translate(-2px, 0px) rotate(1deg);
138  }
139  30% {
140    transform: translate(1px, 2px) rotate(0deg);
141  }
142  40% {
143    transform: translate(1px, -1px) rotate(1deg);
144  }
145  50% {
146    transform: translate(-1px, 3px) rotate(-1deg);
147  }
148  60% {
149    transform: translate(-1px, 1px) rotate(0deg);
150  }
151  70% {
152    transform: translate(3px, 1px) rotate(-1deg);
153  }
154  80% {
155    transform: translate(-2px, -1px) rotate(1deg);
156  }
157  90% {
158    transform: translate(2px, 1px) rotate(0deg);
159  }
160  100% {
161    transform: translate(1px, -2px) rotate(-1deg);
162  }
163}
164.longfazers {
165  position: absolute;
166  width: 100%;
167  height: 100%;
168}
169.longfazers span {
170  position: absolute;
171  height: 2px;
172  width: 20%;
173  background: #000;
174}
175.longfazers span:nth-child(1) {
176  top: 20%;
177  animation: lf 0.6s linear infinite;
178  animation-delay: -5s;
179}
180.longfazers span:nth-child(2) {
181  top: 40%;
182  animation: lf2 0.8s linear infinite;
183  animation-delay: -1s;
184}
185.longfazers span:nth-child(3) {
186  top: 60%;
187  animation: lf3 0.6s linear infinite;
188}
189.longfazers span:nth-child(4) {
190  top: 80%;
191  animation: lf4 0.5s linear infinite;
192  animation-delay: -3s;
193}
194@keyframes lf {
195  0% {
196    left: 200%;
197  }
198  100% {
199    left: -200%;
200    opacity: 0;
201  }
202}
203@keyframes lf2 {
204  0% {
205    left: 200%;
206  }
207  100% {
208    left: -200%;
209    opacity: 0;
210  }
211}
212@keyframes lf3 {
213  0% {
214    left: 200%;
215  }
216  100% {
217    left: -100%;
218    opacity: 0;
219  }
220}
221@keyframes lf4 {
222  0% {
223    left: 200%;
224  }
225  100% {
226    left: -100%;
227    opacity: 0;
228  }
229}