A CodePen by Girish Sharma. Metro-like loading animation with CSS3 - Prefix-free loading animation, inspired by Metro and Windows 8

index.html

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

script.js

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

style.css

* {margin: 0; padding: 0;}
body {	
	background: #eee;
}
.loader {
  margin-top: 10px;
}
.loader, .loader:before, .loader:after {
  display: inline-block;
  width: 100%;
  height: 10px;
  position: absolute;
  animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-opacity 2s ease-in-out infinite alternate;
  background: linear-gradient(to right, black 0px, black 10px, transparent 10px)  no-repeat 0px 0px / 10px 10px;
  content: ' ';
}
.loader {
  animation-delay: .1s;
}
.loader:after {
  animation-delay: .2s;
}
@keyframes loading-opacity {
	from {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes loading {
	0% {
    background-position: -50% 0px;
  }
  100% {
    background-position: 150% 0px;
  }
}