css3-anime/anime/loading/31/css/style-6.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;
}

/* Start the loader code, first, let's align it the center of screen */
.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;
/* disable selection and cursor changes */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default;
	min-width:33.25em;
}

.loader div{
	position:relative;
	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.5s infinite ease-in-out;
	-moz-animation: bounce 1.5s infinite ease-in-out;
	-mos-animation: bounce 1.5s infinite ease-in-out;
	-o-animation: bounce 1.5s infinite ease-in-out;
	animation: bounce 1.5s infinite ease-in-out;
}

.loader div:after{
	content:'';
	position:absolute;
	bottom:-2em;
	left:0.35em;
	width:1.8em;
	height:0.5em;
	background:#322b27;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}

.loader div:nth-child(1){
	-webkit-animation: bouncefirst 1.5s infinite ease-in-out;
	-moz-animation: bouncefirst 1.5s infinite ease-in-out;
	-mos-animation: bouncefirst 1.5s infinite ease-in-out;
	-o-animation: bouncefirst 1.5s infinite ease-in-out;
	animation: bouncefirst 1.5s infinite ease-in-out;
	-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 bouncefirst {
	0% { -webkit-transform: translateX(0px); } 
20% { -webkit-transform: translateX(-50px); } 
25% { -webkit-transform: translateX(-50px); } 
50% { -webkit-transform: translateX(100px); } 
	80%,100% { -webkit-transform: translateX(0px); } 
}

@-moz-keyframes bouncefirst {
	0% { -moz-transform: translateX(0px); } 
20% { -moz-transform: translateX(-50px); } 
25% { -moz-transform: translateX(-50px); } 
50% { -moz-transform: translateX(100px); } 
	80%,100% { -moz-transform: translateX(0px); } 
}

@-mos-keyframes bouncefirst {
	0% { -mos-transform: translateX(0px); } 
20% { -mos-transform: translateX(-50px); } 
25% { -mos-transform: translateX(-50px); } 
50% { -mos-transform: translateX(100px); } 
	80%,100% { -mos-transform: translateX(0px); } 
}

@-o-keyframes bouncefirst {
	0% { -o-transform: translateX(0px); } 
20% { -o-transform: translateX(-50px); } 
25% { -o-transform: translateX(-50px); } 
50% { -o-transform: translateX(100px); } 
	80%,100% { -o-transform: translateX(0px); } 
}

@keyframes bouncefirst {
	0% { transform: translateX(0px); } 
20% { transform: translateX(-50px); } 
25% { transform: translateX(-50px); } 
50% { transform: translateX(100px); } 
	80%,100% { transform: translateX(0px); } 
}





@-webkit-keyframes bounce {
	0% { -webkit-transform: translateX(0px); } 
20% { -webkit-transform: translateX(0px); } 
28% { -webkit-transform: translateX(0px); } 
50% { -webkit-transform: translateX(100px); } 
	80%,100% { -webkit-transform: translateX(0px); } 
}

@-moz-keyframes bounce {
	0% { -moz-transform: translateX(0px); } 
20% { -moz-transform: translateX(0px); } 
28% { -moz-transform: translateX(0px); } 
50% { -moz-transform: translateX(100px); } 
	80%,100% { -moz-transform: translateX(0px); } 
}

@-mos-keyframes bounce {
	0% { -mos-transform: translateX(0px); } 
20% { -mos-transform: translateX(0px); } 
28% { -mos-transform: translateX(0px); } 
50% { -mos-transform: translateX(100px); } 
	80%,100% { -mos-transform: translateX(0px); } 
}

@-o-keyframes bounce {
	0% { -o-transform: translateX(0px); } 
20% { -o-transform: translateX(0px); } 
28% { -o-transform: translateX(0px); } 
50% { -o-transform: translateX(100px); } 
	80%,100% { -o-transform: translateX(0px); } 
}

@keyframes bounce {
	0% { transform: translateX(0px); } 
20% { transform: translateX(0px); } 
28% { transform: translateX(0px); } 
50% { transform: translateX(100px); } 
	80%,100% { transform: translateX(0px); } 
}