A pure CSS 3 based AJAX loader animation

Created by TechItEasy.in

HTML

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.loader {
  text-align: center;
  margin: 20px auto;
}

.loader span {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  margin: 30px auto;
  border-radius: 50%;
  -webkit-animation: loader 0.85s infinite alternate;
  -moz-animation: loader 0.85s infinite alternate;
  animation: loader 0.8s infinite alternate;
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
  background-color: #0069B7;
}

.loader span:nth-of-type(2) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
  background-color: #19AF10;
}

.loader span:nth-of-type(3) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
  background-color: #05518A;
}

.loader span:nth-of-type(4) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
  background-color: #565656;
}

@keyframes loader {
  0% {
    width: 15px;
    height: 15px;
    opacity: 0.96;
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    width: 30px;
    height: 30px;
    opacity: 0.5;
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes loader {
  0% {
    width: 15px;
    height: 15px;
    opacity: 0.96;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 30px;
    height: 30px;
    opacity: 0.5;
    -webkit-transform: translateY(-15px);
  }
}

@-moz-keyframes loader {
  0% {
    width: 15px;
    height: 15px;
    opacity: 0.96;
    -moz-transform: translateY(0);
  }
  100% {
    width: 30px;
    height: 30px;
    opacity: 0.5;
    -moz-transform: translateY(-15px);
  }
}