Loading Style Pure CSS

Google loading style with pure CSS/CSS3.

HTML

<!--
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<div class="loading"><span></span></div>
<div class="loading"><span></span></div>
<div class="loading"><span></span></div>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
.loading {width: 125px; margin: 25% auto}
.loading:before,
.loading:after,
.loading span:before,
.loading span:after {
	content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  animation: move 1s ease-in-out infinite alternate;
}
.loading:before {
  margin-left: 0;
  background: #4285f4;
  animation: move 1s ease-in-out infinite alternate;
}
.loading:after {
  margin-left: 35px;
  background: #db4437;
  animation: move 1s ease-in-out -0.25s infinite alternate;
}
.loading span:before {
  margin-left: 70px;
  background: #f4b400;
  animation: move 1s ease-in-out -0.5s infinite alternate;
}
.loading span:after {
  margin-left: 105px;
  background: #0f9d58;
  animation: move 1s ease-in-out -0.75s infinite alternate;
}

@-moz-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}
@-webkit-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}
@-o-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

JavaScript

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/