loader

for loading screens

by abhijeet abanave

HTML

<div id="preloader"> 
	<div class="loader">
		<div class="inner one"></div>
		<div class="inner two"></div>
		<div  class="inner three"></div>
    <div class="inner four"></div>
	</div>
</div>

CSS

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0; 
	background-image: radial-gradient(circle farthest-corner at center center , #3c4b57 0%, #171c21 60%, #0f1215 100%);
	z-index: 9999999;
	height: 100%;
	width: 100%;
}

.no-js #preloader, .oldie #preloader {
	display: none;
}

.loader {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	perspective: 800px;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	-webkit-transition: height 1s ease-in-out;
	-moz-transition: height 1s ease-in-out;
	-o-transition: height 1s ease-in-out;
	transition: height 1s ease-in-out;
}

.inner {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;  
}

.inner.one {
	left: 0%;
	top: 0%;
	animation: rotate-one 1.5s linear infinite;
	border-bottom: 7px solid #EFEFFA;
}

.inner.two {
	right: 0%;
	top: 0%;
	animation: rotate-two 1.5s linear infinite;
	border-right: 7px solid #EFEFFA;
}

.inner.three {
	right: 0%;
	bottom: 0%;
	animation: rotate-three 1.5s linear infinite;
	border-top: 7px solid #EFEFFA;
}

.inner.four {
	right: 0%;
	bottom: 0%;
	animation: rotate-three 1.5s linear infinite;
	border-top: 7px solid #EFEFFA;
}

@media only screen and (max-width:650px) {
	.loader {
		-webkit-transition: width 1s ease-in-out;
		-moz-transition: width 1s ease-in-out;
		-o-transition: width 1s ease-in-out;
		transition: width 1s ease-in-out;
		-webkit-transition: height 1s ease-in-out;
		-moz-transition: height 1s ease-in-out;
		-o-transition: height 1s ease-in-out;
		transition: height 1s ease-in-out;
		top: calc(50% - 50px);
		left: calc(50% - 50px);
		width: 100px;
		height: 100px;
	}
	.inner.one, .inner.two, .inner.three{
		border-top: 4px solid #EFEFFA;
	}
}

@keyframes rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg)...

JavaScript

$(window).load(function() { 
	$(".loader").fadeOut(400, function(){
		$("#preloader").delay(100).fadeOut(400);
	});  
});