SVG Spinner Animation With Pure CSS

SVG spinner animation with pure CSS and HTML. Loading SVG spinner is created by using little CSS code. Not require any JavaScript code for this code snippet. We have taken two circle tags between the SVG tag. Each tag rotated opposite the other by using the CSS keyframe animation.

HTML

<div class="circle-animation">
	<svg>
		<circle class="circle-one" stroke-linecap="round" cx="50%" cy="50%" r="70">
		</circle>

		<circle class="circle-two" stroke-linecap="round" cx="50%" cy="50%" r="55">
		</circle>	
	</svg>	 	
</div>

CSS

.circle-animation {
    display: table;
    margin: 50px auto;
}

/*--Circle One CSS --*/
.circle-one {
	stroke-dasharray: 60;
    stroke-width: 8;
    stroke: #ff5722;
    fill: transparent;
    animation: 2s circleOne infinite;
}

@keyframes circleOne {
	0% {
		stroke-dasharray:60;
	}
	50% {
		stroke-dasharray:30;
	}
	100% {
		stroke-dasharray:60;
		
	}
}

/*--Circle Two CSS --*/
.circle-two {
	stroke-dasharray: 10;
    stroke-width: 8;
    stroke: #ff9800;
    fill: transparent;
    animation: 2s circleTwo infinite;
}

@keyframes circleTwo {
	0% {
		stroke-dasharray:10;
	}
	50% {
		stroke-dasharray:60;
	}
	100% {
		stroke-dasharray:10;
		
	}
}