В footer
Код:
<div id="page-preloader">
<span class="circle"></span>
<span class="circle1"></span>
</div>
<script type="text/javascript">
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.circle');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>
Css
Код:
/* Прелоадер сайта by ДикиЙ конец ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
position: fixed;
left: 0;
top: 50%;
right: 0;
bottom: 0;
z-index: 100500;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
position: fixed;
left: 0;
top: 51.5%;
right: 0;
bottom: 0;
z-index: 100500;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(194, 194, 194, 0.5);
z-index: 100500;
}
#page-preloader .spinner {
width: 32px;
height: 32px;
position: absolute;
left: 50%;
top: 50%;
background: url('/images/spinner.gif') no-repeat 50% 50%;
margin: -16px 0 0 -16px;
}
/* Прелоадер сайта by ДикиЙ конец ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
От спасибо не откажусь