A Pen by Chris Hutchinson

/*Downloaded from https://www.codeseek.co/chrishutchinson/a-pen-by-chris-hutchinson-mypVNm */
body {
  background: #eaeaea;
}

ul.loader {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 80px;
  height: 57px;
  letter-spacing: -4px;
  list-style-type: none;
  padding: 0;
  line-height: 0px;
}

ul.loader li {
  width: 0px;
  height: 12px;
  display: block;
  background: #9a9a9a;
  margin: 0 0 3px;
  -webkit-animation: spike 0.8s infinite alternate;
          animation: spike 0.8s infinite alternate;
}

ul.loader li:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  background: #8a8a8a;
}

ul.loader li:nth-of-type(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  background: #7a7a7a;
}

ul.loader li:nth-of-type(4) {
  margin: 0;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  background: #6a6a6a;
}

@-webkit-keyframes spike {
  from {
    width: 0;
  }
  
  to {
    width: 80px;
  }
}

@keyframes spike {
  from {
    width: 0;
  }
  
  to {
    width: 80px;
  }
}