Cacher is the code snippet organizer for pro developers

.loader-wrapper{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
    background:#000;
}

.loader{
	display:block;
	position:relative;
	left:50%;
	top:50%;
	width:250px;
	height:250px;
	border-radius:50%;
	border:5px solid transparent;
	border-top-color:#fff;
	-webkit-animation:spin 4s linear infinite;
	animation:spin 4s linear infinite;
	margin:-125px 0 0 -125px;
	z-index:1500
}

.loader:before{
	content:"";
	position:absolute;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	border-radius:50%;
	border:5px solid transparent;
	border-top-color:#fff;
    opacity:0.6;
	-webkit-animation:spin 6s linear infinite;
	animation:spin 6s linear infinite
}

.loader:after{
	content:"";
	position:absolute;
	top:15px;
	left:15px;
	right:15px;
	bottom:15px;
	border-radius:50%;
	border:5px solid transparent;
	border-top-color:#fff;
    opacity:0.4;
	-webkit-animation:spin 3s linear infinite;
	animation:spin 3s linear infinite
}

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

	100%{
		transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg)
	}

}

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

	100%{
		transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg)
	}

}

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

	100%{
		transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg)
	}

}

<div id="loader-wrapper" class="loader-wrapper">
    <div id="loader" class="loader" style="opacity: 1;"></div>
</div>