<html>
<head>
	<title>Test Loading Animation</title>
	
</head>
<body>
	<div class="circle">
		<div class="outer">
			<div class="middle">
				<div class="inner">

				</div>
			</div>
		</div>
	</div>	
</body>
</html>
$circleDimension: 200px;
$innerCircleDimension: ($circleDimension/100)*40;
$middleCircleDimension: ($circleDimension/100)*72;
body{
	background: #333;
}
.container{
	height:50%;
	width: auto;
}
.circle{
	*{
		height: $circleDimension;
		width: $circleDimension;
		overflow: hidden;
		background-image: url(http://hack.lenotta.com/wp-content/uploads/2014/07/outerRing.svg) ;
		background-size: 100% auto;
		background-position: center;
		background-repeat:no-repeat;
		margin: auto;
	}
	
	// margin-top: $circleDimension/2;

	.inner{
		background-size: $innerCircleDimension $innerCircleDimension;
		border-radius: 50%;
		background-image: url(http://hack.lenotta.com/wp-content/uploads/2014/07/circleFull.svg);
		-webkit-animation: cw 1.5s  infinite;
		animation: cw 1.5s  infinite;

	}

	.middle{
		background-size: $middleCircleDimension $middleCircleDimension;
		background-image: url(http://hack.lenotta.com/wp-content/uploads/2014/07/ring.svg) ;
		-webkit-animation: ccw 3s linear infinite;
		animation: cw 3s linear infinite;

	}
	.outer{
		-webkit-animation: cw 6s linear infinite;
		animation: cw 6s linear infinite;
	}


}

@-webkit-keyframes cw {
    0% {-webkit-transform: rotate(0deg); }
    100% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes cw {
     0% {transform: rotate(0deg); }
    100% {transform: rotate(360deg);}
}



@-webkit-keyframes ccw {
    0% {-webkit-transform: rotate(0deg); }
    100% {-webkit-transform: rotate(-360deg);}
}

/* Standard syntax */
@keyframes ccw {
     0% {transform: rotate(0deg); }
    100% {transform: rotate(-360deg);}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.