.preloader {
  color: black;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
}

.preloader .line {
  width: 2px;
  height: 32px;
  background: black;
  display: inline-block;
  animation: opacity-2 1000ms infinite ease-in-out;
}

.preloader .line-1{ animation-delay: 800ms; }
.preloader .line-2{ animation-delay: 600ms; }
.preloader .line-3{ animation-delay: 400ms; }
.preloader .line-4{ animation-delay: 200ms; }
.preloader .line-6{ animation-delay: 200ms; }
.preloader .line-7{ animation-delay: 400ms; }
.preloader .line-8{ animation-delay: 600ms; }
.preloader .line-9{ animation-delay: 800ms; }

@keyframes opacity-1 { 
  0% { 
    opacity: 1;
  }
  50% { 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }  
}

@keyframes opacity-2 { 
  0% { 
    opacity: 1;
    height: 35px;
  }
  50% { 
    opacity: 0;
    height: 32px;
  }
  100% { 
    opacity: 1;
    height: 35px;
  }  
}