css3-anime/anime/loading/31/css/style-5.css

*{
	margin:0em;
	padding:0em;
}

body { 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background: #403833;
	font-family: 'Open Sans';
	font-weight: 100;
	color:#f2f2f2;
	font-size:100%;
	margin:0em;
	padding:0em;
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-mos-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-shadow: inset 0px -5px 10px -7px rgba(0,0,0,0.5), inset 0px 5px 10px -7px rgba(0,0,0,0.5);
	padding: 5% 0%;
	overflow:hidden;
	cursor:default;
	min-width:33.25em;
}

.loader div{
	width:2.5em;
	height:2.5em;
	background:#fff;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	margin:0 5px;
	float:left;
	font-size:1.65em;
	line-height:2.5em;
	-webkit-animation: bounce 1.75s infinite ease-in-out;
	-moz-animation: bounce 1.75s infinite ease-in-out;
	-mos-animation: bounce 1.75s infinite ease-in-out;
	-o-animation: bounce 1.75s infinite ease-in-out;
	animation: bounce 1.75s infinite ease-in-out;
}

.loader div:nth-child(1){
	-webkit-animation-delay: 0ms; 
	-moz-animation-delay: 0ms; 
	-ms-animation-delay: 0ms; 
	-o-animation-delay: 0ms; 
	animation-delay: 0ms;
	background:#DB2F00;
	color:#fff;
}

.loader div:nth-child(2){
	-webkit-animation-delay: 50ms; 
	-moz-animation-delay: 50ms; 
	-ms-animation-delay: 50ms; 
	-o-animation-delay: 50ms; 
	animation-delay: 50ms;
	background:#ff6d37;
	color:#fff;
}

.loader div:nth-child(3){
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
	-ms-animation-delay: 100ms;
	-o-animation-delay: 100ms;
	animation-delay: 100m;
	background:#ffa489;
	color:#fff;
}

.loader div:nth-child(4){
	-webkit-animation-delay: 150ms; 
	-moz-animation-delay: 150ms; 
	-ms-animation-delay: 150ms; 
	-o-animation-delay: 150ms; 
	animation-delay: 150ms;
	background:#f2f2f2;
	color:#555;
}

.loader div:nth-child(5){
	-webkit-animation-delay: 200ms; 
	-moz-animation-delay: 200ms; 
	-ms-animation-delay: 200ms; 
	-o-animation-delay: 200ms; 
	animation-delay: 200ms;
	background:#99d3d4;
	color:#fff;
}

.loader div:nth-child(6){
	-webkit-animation-delay: 250ms; 
	-moz-animation-delay: 250ms; 
	-ms-animation-delay: 250ms; 
	-o-animation-delay: 250ms; 
	animation-delay: 250ms;
	background:#56bebf;
	color:#fff;
}

.loader div:nth-child(7){
	-webkit-animation-delay: 300ms; 
	-moz-animation-delay: 300ms; 
	-ms-animation-delay: 300ms; 
	-o-animation-delay: 300ms; 
	animation-delay: 300ms;
	color:#fff;
	background:#13A3A5;
}


@-webkit-keyframes bounce {
	0% { -webkit-transform: translateY(-150px); } 
20% { -webkit-transform: translateY(30px); } 
30% { -webkit-transform: translateY(-10px); } 
40% { -webkit-transform: translateY(0); } 
60% { -webkit-transform: translateY(0); } 
80% { -webkit-transform: translateY(-20px); } 
100% { -webkit-transform: translateY(150px); } 
}


@-moz-keyframes bounce {
	0% { -moz-transform: translateY(-150px); } 
20% { -moz-transform: translateY(30px); } 
30% { -moz-transform: translateY(-10px); } 
40% { -moz-transform: translateY(0); } 
60% { -moz-transform: translateY(0); } 
80% { -moz-transform: translateY(-20px); } 
100% { -moz-transform: translateY(150px); } 
}


@-mos-keyframes bounce {
	0% { -mos-transform: translateY(-150px); } 
20% { -mos-transform: translateY(30px); } 
30% { -mos-transform: translateY(-10px); } 
40% { -mos-transform: translateY(0); } 
60% { -mos-transform: translateY(0); } 
80% { -mos-transform: translateY(-20px); } 
100% { -mos-transform: translateY(150px); } 
}


@-o-keyframes bounce {
	0% { -o-transform: translateY(-150px); } 
20% { -o-transform: translateY(30px); } 
30% { -o-transform: translateY(-10px); } 
40% { -o-transform: translateY(0); } 
60% { -o-transform: translateY(0); } 
80% { -o-transform: translateY(-20px); } 
100% { -o-transform: translateY(150px); } 
}


@keyframes bounce {
	0% { transform: translateY(-150px); } 
20% { transform: translateY(30px); } 
30% { transform: translateY(-10px); } 
40% { transform: translateY(0); } 
60% { transform: translateY(0); } 
80% { transform: translateY(-20px); } 
100% { transform: translateY(150px); } 
}