CS - Pure CSS Spin Loader
Using Border Radius & Transforms with @Keyframes for animation

The Finished Product

How It's Done

	<div class="loader">
		<div class="inner-loader"></div>
	</div>
						

CSS

@keyframes spin {
   100% {
      transform:rotate(360deg);
   }
}
@keyframes backspin {
   100% {
      transform:rotate(-360deg);
   }
}
.loader {
   margin: 50px auto;
   width:400px;
   height:400px;
   border:30px solid #330066;
   border-right-color:transparent;
   border-bottom-color:#860DFF;
   border-left-color:#5300A6;
   border-radius:50%;
   animation: spin 700ms linear infinite;
}
.inner-loader {
   margin:20px auto;
   width:300px;
   height:300px;
   border:100px solid #FF6600;
   border-left-color:transparent;
   border-bottom-color:#FF6666;
   border-right-color:#FF66CC;
   border-radius:50%;
   animation: backspin 350ms linear infinite;
}