.loader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #fff
}
.loader > .inside {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	margin: -36px 0 0 -57px;
	width: 115px;
	height: 73px
}
.circle-1 {
	height: 120px;
	width: 120px;
	background: #ff276e;
}
.circle-2 {
	height: 100px;
	width: 100px;
	background: #00b3c1;
}
.circle-3 {
	height: 80px;
	width: 80px;
	background: #eeeb11;
}
.circle-4 {
	height: 60px;
	width: 60px;
	background: #ff5fa3;
}
.circle-5 {
	height: 40px;
	width: 40px;
	background: #43adff;
}
.circle-6 {
	height: 20px;
	width: 20px;
	background: #83c909;
}
.circle-7 {
	height: 10px;
	width: 10px;
	background: #ff6c00;
}
.circle-8 {
	height: 5px;
	width: 5px;
	background: #bf69fc;
}
.circle-1, .circle-2, .circle-3, .circle-4, .circle-5, .circle-6, .circle-7, .circle-8 {
	border-bottom: none;
	border-radius: 50%;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	-webkit-animation-name: spin;
	-webkit-animation-duration: 4000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: spin;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
 @keyframes spin {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(360deg);
}
}
 @-webkit-keyframes spin {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(360deg);
}
}