<p>Simple CSS3 loading animation</p><br/>

  <div class="div1" ></div>
  <div class="div2" ></div>
  <div class="div3" ></div>
  

div{
  height: 25px;
  width: 10px;
  background:#0052CC;
  float:left;
  margin:2px;
  -webkit-animation: animateDiv 1.5s infinite  alternate; /* Chrome and Safari */
  animation: animateDiv 1.5s infinite  alternate;
   
}
.div1 {
  animation-delay:0s;
  -webkit-animation-delay:0s;
}
.div2 {
  animation-delay:.5s;
  -webkit-animation-delay:.5s;
}
.div3 {
    animation-delay:1s;
    -webkit-animation-delay:1s;
}

@keyframes animateDiv 
{
0%   {0s}
50%  {background:#66A3FF; 1.3s}
100% {background:#E6F0FF; scale: 0.5;}
}

@-webkit-keyframes animateDiv /* Chrome and Safari */
{
0%   {0s}
50%  {background:#66A3FF; 1.3s}
100% {background:#E6F0FF; scale: 0.5;}
}