Preloader

HTML
<div class="preloader">
   <div class="spinner spinner-circle"></div>
</div>

CSS
.preloader	{background-color: #fff; bottom: 0; box-sizing: border-box; height: 100%; left: 0; position: fixed; right: 0; top: 0;  width: 100%; z-index: 100;}
.spinner 	{height: 156px; left: 50%; margin: -70px; position: absolute; top: 50%; width: 156px; background:rgba(0, 0, 0, 0) url("../preloader.gif") no-repeat scroll 26px 27px;}
.spinner::after 	{border-radius: 50%; content: ""; height: 140px; left: 0; margin: 0; opacity: 0; pointer-events: none;    position: absolute; top: 0; width: 140px;}
.spinner-circle::before {background: #fff none repeat scroll 0 0; border-radius: 50%; content: ""; height: 8px;    left: 0; margin: 0 0 0; opacity: 0; position: absolute; top: 65px; transform-origin: 70px 50% 0; width: 8px; animation-duration: 5s, 1s; animation-fill-mode: forwards; animation-iteration-count: 1, infinite; animation-name: effect-2, effect-3;    animation-timing-function: ease, linear; z-index:2;}
.spinner-circle::after {border: 8px solid #5dbc56; animation: 5s ease 0s normal forwards infinite running effect-1;}

@keyframes effect-1 {
	0%, 100% {opacity: 1; transform: scale3d(1, 1, 1);}
}
@keyframes effect-2 {
	0%, 100% {opacity: 1;}
}
@keyframes effect-3 {
	100% {transform: rotate3d(0, 0, 1, 360deg);}
}

JQUERY
$(window).on('load', function () {
	$(".preloader .spinner").fadeOut(); 
	$(".preloader").fadeOut(200);
});

Strona główna bloga