<div class="loader">
  <span class="dot_1"></span>
  <span class="dot_2"></span>
  <span class="dot_3"></span>
</div>

* {margin: 0; padding: 0;}
body {	
	background: #eee;
}
.loader {
  margin: 50px auto;
  text-align: center;
  position: relative;
  width: 60%;
}
.loader span {
  background: #222;
  border-radius: 5px;
  display: inline-block;
  position: relative;
	width: 10px;
  height: 10px;
  position: absolute;
}
.loader .dot_1 {
  margin-right: 10px;
  animation: loading 4s ease-in-out infinite;
}
.loader .dot_2 {
  animation: loading 4s ease-in-out .3s infinite;
}
.loader .dot_3 {
  animation: loading 4s ease-in-out .6s infinite;
}
@keyframes loading {
	from {
    margin-left: 50%;
  	opacity: 0;
  }
  50% {
    margin-left: 0;
  	opacity: 1;
  }
  to {
    margin-left: -50%;
  	opacity: 0;
  }
}

/**
 * Prefix-free loading animation,
 * inspired by Metro and Windows 8
 */