/* based on http://s3.amazonaws.com/37assets/svn/461-spinner.html */

div.spinner {
	position: relative;
	width: 100px;
	height: 100px;
	display: inline-block;
}

div.spinner div {
	width: 12%;
	height: 26%;
	background: #000;
	position: absolute;
	left: 44.5%;
	top: 37%;
	opacity: 0;
}

div.spinner div {
	animation: fade 1s linear infinite;
	border-radius: 50px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);

	-webkit-animation: fade 1s linear infinite;
	-webkit-border-radius: 50px;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);

	-moz-animation: fade 1s linear infinite;
	-moz-border-radius: 50px;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

div.spinner div.bar1 {
	-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;
	-moz-transform:rotate(0deg) translate(0, -142%); -moz-animation-delay: 0s;
}    
div.spinner div.bar2 {
	-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;
	-moz-transform:rotate(30deg) translate(0, -142%); -moz-animation-delay: -0.9167s;
}
div.spinner div.bar3 {
	-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;
	-moz-transform:rotate(60deg) translate(0, -142%); -moz-animation-delay: -0.833s;
}
div.spinner div.bar4 {
	-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;
	-moz-transform:rotate(90deg) translate(0, -142%); -moz-animation-delay: -0.75s;
}
div.spinner div.bar5 {
	-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;
	-moz-transform:rotate(120deg) translate(0, -142%); -moz-animation-delay: -0.667s;
}
div.spinner div.bar6 {
	-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;
	-moz-transform:rotate(150deg) translate(0, -142%); -moz-animation-delay: -0.5833s;
}
div.spinner div.bar7 {
	-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;
	-moz-transform:rotate(180deg) translate(0, -142%); -moz-animation-delay: -0.5s;
}
div.spinner div.bar8 {
	-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;
	-moz-transform:rotate(210deg) translate(0, -142%); -moz-animation-delay: -0.41667s;
}
div.spinner div.bar9 {
	-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;
	-moz-transform:rotate(240deg) translate(0, -142%); -moz-animation-delay: -0.333s;
}
div.spinner div.bar10 {
	-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;
	-moz-transform:rotate(270deg) translate(0, -142%); -moz-animation-delay: -0.25s;
}
div.spinner div.bar11 {
	-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;
	-moz-transform:rotate(300deg) translate(0, -142%); -moz-animation-delay: -0.1667s;
}
div.spinner div.bar12 {
	-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;
	-moz-transform:rotate(330deg) translate(0, -142%); -moz-animation-delay: -0.0833s;
}

@-webkit-keyframes fade {
	from {opacity: 1;}
	to {opacity: 0.25;}
}

@-moz-keyframes fade {
	from {opacity: 1;}
	to {opacity: 0.25;}
}