<div>
    <div class="loadingbar a"></div>
    <div class="loadingbar b"></div>
    <div class="loadingbar c"></div>
    <div class="loadingbar d"></div>
    <div class="loadingbar e"></div>
    <div class="loadingbar f"></div>
    <div class="loadingbar g"></div>
    <div class="loadingbar h"></div>
    <div class="loadingbar i"></div>
    <div class="loadingbar j"></div>
    <div class="loadingbar k"></div>
    <div class="loadingbar l"></div>
    <div class="loadingbar m"></div>
    <div class="loadingbar n"></div>
    <div class="loadingbar o"></div>
</div>

@keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

@-o-keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

@-moz-keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

@-webkit-keyframes woop {

  0%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;

  }
  25%{
    height: 1em;

    margin-top: 2em;
    margin-bottom: 2em;
  }
 
  36%{
    height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;

}
  47%{
 height: 3em;

    margin-top: 1em;
    margin-bottom: 1em;
  }
 
 
  55%{
    height: 1em;
    
    margin-top: 2em;
    margin-bottom: 2em;

  }



}

.loadingbar {

  float: left;
  width: 1em;
  height: 1em;

  margin-top: 2em;
  margin-bottom: 2em;


  -webkit-animation: woop 1.4s infinite;
     -moz-animation: woop 1.4s infinite;
       -o-animation: woop 1.4s infinite;
          animation: woop 1.4s infinite;
  -webkit-animation-timing-function: ease-out;
     -moz-animation-timing-function: ease-out;
       -o-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
    
}


.mid {

  margin-top: 1.5em;
  margin-bottom: 1.5em;

  height: 2em;

}

.on {

  margin-top: 1em;
  margin-bottom: 1em;

  height: 3em; 

}

.a {    -webkit-animation-delay: 0s;
           -moz-animation-delay: 0s;
             -o-animation-delay: 0s;
                animation-delay: 0s;
                background: #ec2b36;  }

.b {    -webkit-animation-delay: 0.1s;
           -moz-animation-delay: 0.1s;
             -o-animation-delay: 0.1s;
                animation-delay: 0.1s;
                  background: #f34e54;  }

.c {    -webkit-animation-delay: 0.2s;
           -moz-animation-delay: 0.2s;
             -o-animation-delay: 0.2s;
                animation-delay: 0.2s;
                  background: #f17e59;  }

.d {    -webkit-animation-delay: 0.3s;
           -moz-animation-delay: 0.3s;
             -o-animation-delay: 0.3s;
                animation-delay: 0.3s;
                  background: #efa774;  }

.e {    -webkit-animation-delay: 0.4s;
           -moz-animation-delay: 0.4s;
             -o-animation-delay: 0.4s;
                animation-delay: 0.4s;
                  background: #fbd781;  }

.f {    -webkit-animation-delay: 0.5s;
           -moz-animation-delay: 0.5s;
             -o-animation-delay: 0.5s;
                animation-delay: 0.5s;
                  background: #eae583;  }

.g {    -webkit-animation-delay: 0.6s;
           -moz-animation-delay: 0.6s;
             -o-animation-delay: 0.6s;
                animation-delay: 0.6s;
                  background: #c6e683;  }

.h {    -webkit-animation-delay: 0.7s;
           -moz-animation-delay: 0.7s;
             -o-animation-delay: 0.7s;
                animation-delay: 0.7s;
                  background: #adc973;  }

.i {    -webkit-animation-delay: 0.8s;
           -moz-animation-delay: 0.8s;
             -o-animation-delay: 0.8s;
                animation-delay: 0.8s;
                  background: #a3bd8d;  }

.j {    -webkit-animation-delay: 0.9s;
           -moz-animation-delay: 0.9s;
             -o-animation-delay: 0.9s;
                animation-delay: 0.9s;    
                  background: #86c3a8;  }

.k {      -webkit-animation-delay: 1s;
             -moz-animation-delay: 1s;
               -o-animation-delay: 1s;
                  animation-delay: 1s;    
                  background: #92d5b9;  }

.l {    -webkit-animation-delay: 1.1s;
           -moz-animation-delay: 1.1s;
             -o-animation-delay: 1.1s;
                animation-delay: 1.1s;    
                  background: #92d4d3;  }

.m {    -webkit-animation-delay: 1.2s;
           -moz-animation-delay: 1.2s;
             -o-animation-delay: 1.2s;
                animation-delay: 1.2s;    
                  background: #8bc9e0;  }

.n {    -webkit-animation-delay: 1.3s;
           -moz-animation-delay: 1.3s;
             -o-animation-delay: 1.3s;
                animation-delay: 1.3s;      
                  background: #7db5d8;  }

.o {    -webkit-animation-delay: 1.4s;
           -moz-animation-delay: 1.4s;
             -o-animation-delay: 1.4s;
                animation-delay: 1.4s;      
                  background: #5ba5d3;  }

/*
  http://jsfiddle.net/6rabT/3/
  by /u/Napoleon_Borntoparty
  
*/