Flickr Loader Animation - Snippet

Preview
HTML
CSS
JS

<div class="flickr-loader dark">
	<span>loading</span>
	<span>...</span>
</div>

<div class="flickr-loader light">
	<span>loading</span>
	<span>...</span>
</div>

body {
	font: 14px "Helvetica Neue","Helvetica LT", Helvetica, Arial,sans-serif;
	color: #FFF;
	background: #222;
	margin: 50px auto 0;
}
.flickr-loader{
	width: 58px;
	height: 27px;
	margin: 0 auto 10px;
	position: relative;
	z-index: -1;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.flickr-loader.dark {
	background: #000;
	-webkit-box-shadow: 0 0 9px rgba(0,0,0,.3);
	-moz-box-shadow: 0 0 9px rgba(0,0,0,.3);
	box-shadow: 0 0 9px rgba(0,0,0,.3);
}
.flickr-loader.light {
	background: #FFF;
}
span {
	text-indent: -9999px;
	height: 12px;
	width: 12px;
	position: absolute;
	top: 8px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	background: #ff0084;
	left: 16px; 
	z-index: 1;
	-webkit-animation: pink 2.2s infinite;
	-moz-animation: pink 2.2s infinite;
	-ms-animation: pink 2.2s infinite;
	animation: pink 2.2s infinite;
}
span:nth-of-type(2) {
	background: #0063dc;
	left: 30px; 
	z-index: 2;
	-webkit-animation: blue 2.2s infinite;
	-moz-animation: blue 2.2s infinite;
	-ms-animation: blue 2.2s infinite;
	animation: blue 2.2s infinite;
}
@-webkit-keyframes pink {
	0% { left: 16px; z-index: 1;}
	50% { left: 29px; }
    100% { z-index: 3; left: 13px; }
}
@-webkit-keyframes blue {
	0% {  left: 30px; z-index: 2; }
	50% { left: 16px; }
	100% { z-index: 1; left: 30px; }
}
@-moz-keyframes pink {
	0% { left: 16px; z-index: 1;}
	50% { left: 29px; }
    100% { z-index: 3; left: 13px; }
}
@-moz-keyframes blue {
	0% {  left: 30px; z-index: 2; }
	50% { left: 16px; }
	100% { z-index: 1; left: 30px; }
}
@-ms-keyframes pink {
	0% { left: 16px; z-index: 1;}
	50% { left: 29px; }
    100% { z-index: 3; left: 13px; }
}
@-ms-keyframes blue {
	0% {  left: 30px; z-index: 2; }
	50% { left: 16px; }
	100% { z-index: 1; left: 30px; }
}
@keyframes pink {
	0% { left: 16px; z-index: 1;}
	50% { left: 29px; }
    100% { z-index: 3; left: 13px; }
}
@keyframes blue {
	0% {  left: 30px; z-index: 2; }
	50% { left: 16px; }
	100% { z-index: 1; left: 30px; }
}