A Pen by A Non Ymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

This is just a simple loading animation made of 10 p tags. I call it "Pulse"

A Pen by A Non Ymous on CodePen.

License.

index.haml

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

style.css

body{
	text-align:center;
background:#34aadc;
}

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

p{
	height:80px;
	width:6px;
	background:#fff;
	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;}