.loader {
	z-index: 10;
	position: absolute;
	top: 43%;
	left: 43%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #03a9f4;
  	border: 10px solid #f3f3f3;
	border-radius: 50%;
	border-top: 10px solid blue;
  	border-right: 10px solid green;
  	border-bottom: 10px solid red;
  	border-left: 10px solid pink;
  	width: 50px;
  	height: 50px;
  	-webkit-animation: spin 1s linear infinite;
  	animation: spin 1s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader:after {
	content: '';
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	border: 0px solid white;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-animation: loading 1000ms ease-out forwards infinite;
	animation: loading 2000ms ease-out forwards infinite;
}
@-webkit-keyframes loading {
	0% {
		border: 0px solid yellow;
	}
	20% {
		border: 8px solid black;
		width: 0%;
		height: 0%;
	}
	100% {
		border: 8px solid yellow;
		width: 100%;
		height: 100%;
	}
}
@keyframes loading {
	0% {
		border: 0px solid yellow;
	}
	20% {
		border: 8px solid black;
		width: 0%;
		height: 0%;
	} 
	100% {
		border: 8px solid yellow;
		width: 100%;
		height: 100%;
	}
}