.px-spinner {
	.circle1 {
		fill        : none;
		stroke      : var(--px-spinner-background-color, gray);
		stroke-width: 5px;
	}

	.circle2 {
		fill             : none;
		stroke           : var(--px-spinner-fill-color, black);
		stroke-width     : 5px;
		stroke-dasharray : 283;
		stroke-dashoffset: 566;
		animation        : pxSpinnerRotate 1.5s infinite cubic-bezier(.78,.13,.16,.87);
	}
}


// IE/Edge version (does not support SVG animation)

.spinner-container {
	font-size    : 10px;
	position     : relative;
	text-indent  : -9999em;
	border-top   : 5px solid var(--px-spinner-background-color, gray);
	border-right : 5px solid var(--px-spinner-background-color, gray);
	border-bottom: 5px solid var(--px-spinner-background-color, gray);
	border-left  : 5px solid var(--px-spinner-fill-color, black);
	transform    : translateZ(0);
	animation    : pxSpinnerLoad8 1.1s infinite cubic-bezier(.78,.13,.16,.87);
}

.spinner-container,
.spinner-container:after {
	border-radius: 50%;
	width        : 10em;
	height       : 10em;
}
@keyframes pxSpinnerLoad8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform        : rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform        : rotate(360deg);
	}
}
@keyframes pxSpinnerRotate {
	to {
		stroke-dashoffset: 0;
	}
}