Показать сообщение отдельно
Старый 24.09.2014, 15:26 Вверх   #1
Грамотный форумчанин
 
Аватар для Dikiy_J
Dikiy_J вне форума
Доп. информация
По умолчанию Прелоадер сайта

В 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 ДикиЙ конец ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/























От спасибо не откажусь
  Ответить с цитированием
Cказали cпасибо:
 
Время генерации страницы 0.04741 секунды с 10 запросами