A Simple Loading Icon - Snippet

Preview
HTML
CSS
JS

<section>
	<figure class="spinner">
		<figure class="bar1"></figure>   
		<figure class="bar2"></figure>
		<figure class="bar3"></figure>
		<figure class="bar4"></figure>
		<figure class="bar5"></figure>
		<figure class="bar6"></figure>
		<figure class="bar7"></figure>
		<figure class="bar8"></figure>
		<figure class="bar9"></figure>
		<figure class="bar10"></figure>
		<figure class="bar11"></figure>
		<figure class="bar12"></figure>			  
	</figure>
</section>

@-webkit-keyframes fade { 
    0% { opacity: 1 }
    100% { opacity: 0.25 }
}

@-moz-keyframes fade { 
    0% { opacity: 1 }
    100% { opacity: 0.25 }
}

figure.spinner {
	position: relative;
	left: -30px;
    width: 30px;
    height: 30px;
	margin: 50px auto;
}

figure.spinner figure {
    background: #EB8921;
    width: 3px;
    height: 7px;
    position: absolute;
	top: 0;
	left: 0;
    -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;
}

figure.spinner figure.bar1 {
    -webkit-transform: rotate(0deg) translate(0, -142%);
    -webkit-animation-delay: 0s;
    -moz-transform: rotate(0deg) translate(0, -142%);
    -moz-animation-delay: 0s;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}

figure.spinner figure.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;
}