* {
  padding: 0;
  margin: 0;
  box-sizing: inherit
}

body {
 background: #151515;
 box-sizing: border-box;
  height: 100vh;
}

.loading {
  height: 100%;
}

.bar {
  height: 9.75%;
  margin-top: .25%;
  background: #f2f2f2;
  opacity: .15;
  -webkit-animation: loading 500ms infinite alternate backwards ease-in-out;
  animation: loading 500ms infinite alternate backwards ease;
  transform: translateZ(0);
}

.bar:nth-child(1) { -webkit-animation-delay: 100ms; animation-delay: 100ms }
.bar:nth-child(2) { -webkit-animation-delay: 200ms; animation-delay: 200ms }
.bar:nth-child(3) { -webkit-animation-delay: 300ms; animation-delay: 300ms }
.bar:nth-child(4) { -webkit-animation-delay: 400ms; animation-delay: 400ms }
.bar:nth-child(5) { -webkit-animation-delay: 500ms; animation-delay: 500ms }
.bar:nth-child(6) { -webkit-animation-delay: 600ms; animation-delay: 600ms }
.bar:nth-child(7) { -webkit-animation-delay: 700ms; animation-delay: 700ms }
.bar:nth-child(8) { -webkit-animation-delay: 800ms; animation-delay: 800ms }
.bar:nth-child(9) { -webkit-animation-delay: 900ms; animation-delay: 900ms }
.bar:nth-child(10) { -webkit-animation-delay: 1000ms; animation-delay: 1000ms }

@-webkit-keyframes loading {
  0%   { opacity: 0; }
  100% { opacity: .05; }
}
@-moz-keyframes loading {
  0%   { opacity: 0; }
  100% { opacity: .05; }
}
@-o-keyframes loading {
  0%   { opacity: 0; }
  100% { opacity: .05; }
}
@keyframes loading {
  0%   { opacity: 0; }
  100% { opacity: .05; }
}