.spinner{
	position: absolute;
	left: 46%;
	top: 27%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 8px solid lightgray;
	border-top:  8px solid #114;
	border-bottom:  8px solid #114;
	animation: anime 1.4s ease infinite;
}

@keyframes anime{
	from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}

.spinner::before{
	position: absolute;
	content: "";
	width: 200%;
	height: 200%;
	left: 50%;
	top: 50%;
	border-radius: inherit;
	opacity: 0.6;
	transform: translate(-50%, -50%);
	border: 10px solid lightgray ;
	border-left: 10px solid darkgreen ;
	border-right: 10px solid darkgreen ;
}

.spinner::after{
	position: absolute;
	content: "";
	width: 300%;
	height: 300%;
	left: 50%;
	top: 50%;
	border-radius: inherit;
	opacity: 0.6;
	transform: translate(-50%, -50%);
	border: 12px solid lightgray ;
	border-top: 12px solid red ;
	border-bottom: 12px solid red ;				
}