Animated Bars Preloader

by heavyhorse

HTML

<div class='preloader'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

/* preloader */
.preloader {
  position: relative;
  width: 65px;
  margin: 6em auto;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 9px;
  height: 5px;
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-animation: preloader 2s infinite ease-in-out;
          animation: preloader 2s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
}

@keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
}

.preloader-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 16px 0;
}