Тема: Простой CSS прелоадер для сайта
Всем привет!
Хочу поделиться простым прелоадером для сайта, который полностью сделан на CSS!
Код CSS выглядит следующим образом:
.load-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
z-index: 99999;
}
.no-cssanimations .load-container .loader {
text-indent: 0;
text-align: center;
color: #fff;
font-size: 17px;
background: none;
border: 0 none;
width: auto;
height: auto;
margin: 1em auto;
overflow: visible;
box-shadow: none;
-webkit-animation: none;
animation: none;
}
.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
display: none;
}
.load8 .loader {
position: absolute;
top: 50%;
left: 50%;
margin-left: -4.3em;
margin-top: -4.3em;
font-size: 10px;
text-indent: -9999em;
border-top: 0.6em solid rgba(255, 255, 255, 0.2);
border-right: 0.6em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.6em solid rgba(255, 255, 255, 0.2);
border-left: 0.6em solid #fff;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.load8 .loader, .load8 .loader:after {
border-radius: 50%;
width: 8em;
height: 8em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}далее в шаблоне, сразу после <body> вставляем следующие строки:
<!-- PRELOADER -->
<div class="load-container load8">
<div class="loader">Loading...</div>
</div>
<!-- END / PRELOADER -->перед </body>, где у вас прописаны скрипты, пишем следующий код:
<script>
$(window).load(function () {
$(".load-container").delay(100).fadeOut(250);
});
</script>При загрузке сайта посетитель увидит на черном фоне анимированный лоадер, как только страница полностью загрузится - заставка скрывается.
В таком исполнении прелоадер получается универсальным:
если браузер поддерживает анимацию - посетитель увидит прелоадер,
если анимация не поддерживается - увидит надпись "Loading..."
Правда для того, чтобы определить возможности браузера нужно использовать modernizr.
Поэтому в секцию HEAD подключаем:
<script src="<?php get_theme_url(); ?>/assets/js/modernizr.js"></script>Пример такого прелоадера можете посмотреть на моем тестовом сайте (специально сделал побольше задержку перед скрытием заставки)!
Возможно кому-то пригодится такое решение!?
Всем спасибо! Всем пока!
P.S. Вообще у меня создана библиотека из 9 прелоадеров (от 0 до 8), поэтом и load8. 
