/*
<div class="loader">
	<svg class="circular">
			<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
	</svg>
</div>
*/

.material-design-loader {
	position: relative;
	margin: 0px auto;
	width: 100px;
	height: 100px;
	zoom: 1.7;
}

.material-design-loader-circular {
	-webkit-animation: material-design-loader-rotate 2s linear infinite;
					animation: material-design-loader-rotate 2s linear infinite;
	height: 100px;
	position: relative;
	width: 100px;
}

.material-design-loader-path {
	stroke-dasharray: 1,200;
	stroke-dashoffset: 0;
	-webkit-animation: material-design-loader-dash 1.5s ease-in-out infinite, material-design-loader-color 6s ease-in-out infinite;
					animation: material-design-loader-dash 1.5s ease-in-out infinite, material-design-loader-color 6s ease-in-out infinite;
	stroke-linecap: round;
}

@-webkit-keyframes material-design-loader-rotate {
	100% {
		-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
	}
}

@keyframes material-design-loader-rotate {
	100% {
		-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
	}
}
@-webkit-keyframes material-design-loader-dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;
	}
}
@keyframes material-design-loader-dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;
	}
}
@-webkit-keyframes material-design-loader-color {
	100%, 0% {
		stroke: #d62d20;
	}
	40% {
		stroke: #0057e7;
	}
	66% {
		stroke: #008744;
	}
	80%, 90% {
		stroke: #ffa700;
	}
}
@keyframes material-design-loader-color {
	100%, 0% {
		stroke: #d62d20;
	}
	40% {
		stroke: #0057e7;
	}
	66% {
		stroke: #008744;
	}
	80%, 90% {
		stroke: #ffa700;
	}
}