Wave loader animation

index.html

<div id="wave">
	<span class="line"></span>
	<span class="line"></span>
	<span class="line"></span>
	<span class="line"></span>
</div>

style.css

html, body {
	margin:0;
	padding:0;
}

body {
	background:#ee0f0f;
}

div#wave {
	position:relative;
 transform: rotate(-130deg);
	margin-top:50vh;
	text-align:center;
	width:100px;
	height:100px;
	margin-left: auto;
	margin-right: auto;
	.line {
		display:inline-block;
		width:12px;
		margin-right:3px;
		background:#fff;
		animation: wave 1.3s linear infinite;

		&:nth-child(1) {
			height:40px;
		}

		&:nth-child(2) {
			height:30px;
			animation-delay: -1.2s;
		}

		&:nth-child(3) {
			height:20px;
			animation-delay: -1.1s;
		}

		&:nth-child(4) {
			height:10px;
			animation-delay: -1.0s;
		}

	}
}

@keyframes wave {
	0%, 60%, 100% {
		transform: initial;
	}

	40% {
		transform: translateY(-20px);
	}
}

Wave loader animation.markdown

Wave loader animation

Wave loader animation for website/application like Last.fm

Forked from Mattonit's Pen Wave loader animation.

A Pen by Captain Anonymous on CodePen.

License.