Wavy Loader

A fancy CSS3 loading animation.

by Kaiyuan Xie

HTML

<div>
    <span></span><!--
 --><span></span><!--
 --><span></span><!--
 --><span></span><!--
 --><span></span>
</div>

CSS

body
{
	background: #3e6b61;
}

div
{
	position: absolute;
	width: 400px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -200px;
	text-align: center;
}

span
{
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 145px 3px 0;
	background: rgba(255,255,255,0.25);
	border-radius: 50%;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	
	animation: wave 2s infinite ease-in-out;
	-moz-animation: wave 2s infinite ease-in-out;
	-webkit-animation: wave 2s infinite ease-in-out;
}

@keyframes wave
{
	0%, 60%, 100%
	{
		background: rgba(255,255,255,0.25);
		transform: translateY(0);
		-moz-transform: translateY(0);
	}
	
	20%
	{
		background: rgba(255,255,255,0.75);
		transform: translateY(13px);
		-moz-transform: translateY(13px);
	}
	
	40%
	{
		background: rgba(255,255,255,0.75);
		transform: translateY(-13px);
		-moz-transform: translateY(-13px);
	}
	
}

@-webkit-keyframes wave
{
	0%, 60%, 100%
	{
		background: rgba(255,255,255,0.25);
		transform: translateY(0);
		-webkit-transform: translateY(0);		
	}
	
	20%
	{
		background: rgba(255,255,255,0.75);
		transform: translateY(13px);
		-webkit-transform: translateY(13px);
	}
	
	40%
	{
		background: rgba(255,255,255,0.75);
		transform: translateY(-13px);
		-webkit-transform: translateY(-13px);
	}
}

span:nth-child(1)
{
	animation-delay: 0s;
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

span:nth-child(2)
{
	animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}

span:nth-child(3)
{
	animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

span:nth-child(4)
{
	animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

span:nth-child(5)
{
	animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}