A CodePen by Joacim Nilsson. Loading animation - This is just a simple loading animation based on 10 p tags just looping the exact same animation but with different delays.

index.haml

#loading
 - (1..10).each do
  %p

style.css

body{
	text-align:center;
}

#loading{
	width:200px;
	height:100px;
	margin:100px auto;
}

p{
	height:80px;
	width:6px;
	border-radius:3px;
	background:#333;
	display:inline-block;
	animation:loader 1.3s infinite;
}

@keyframes loader{
	50% { height:6px; margin-top:74px; opacity:.1; }
}

p:nth-child(1) {animation-delay:.1s;}
p:nth-child(2) {animation-delay:.2s;}
p:nth-child(3) {animation-delay:.3s;}
p:nth-child(4) {animation-delay:.4s;}
p:nth-child(5) {animation-delay:.5s;}
p:nth-child(6) {animation-delay:.6s;}
p:nth-child(7) {animation-delay:.7s;}
p:nth-child(8) {animation-delay:.8s;}
p:nth-child(9) {animation-delay:.9s;}
p:nth-child(10){animation-delay:1s;}