» »

Код preloader загрузки страницы сайта

Код preloader загрузки страницы сайта

Красивая загрузка страницы при помощи скрипта Preloader для сайта. Сам он простой и по установки аналогично, что сами поставить картинку. Работать он будет при загрузки любой странице на интернет ресурсе. Это появится с начало прозрачный темно светлый форум, и по центру уже будет изображение, которое будет на ссылки. Здесь вы можете ставить разную, можно менять под различные праздники. С кодом идет стили, которые нужно поставить в CSS И вот в нем можно редактировать основной дизайн.

Здесь мы видим, что все происходит на светлом квадрате без углов, и на нем Preloader крутиться.

Скрипт preloader загрузки страницы сайта

Но если мы из стиля уберем background:#FFF; так как уже будет такое визуальное обозрение.

Скрипт загрузки страницы сайта

Приступаем к установке:

В низ сайта ставим сначало этот скрипт.

Код
<script type="text/javascript">  
jQuery(function($) {  
$(window).load(function () {  
$(".preloader").fadeOut(700);  
});  
});  
</script>


И ниже добавляем:

Здесь мы видим как раз место под ссылку, что находим что вам нужно и меняем. И ваше изображение появиться при загрузки.

Код
<div class="preloader">  
<div class="loading">  
<div class="loading_in">  
<img src="http://zornet.ru/Aben/7e56.gif" alt="" />  
</div>  
</div>  
</div>


CSS

Код
.preloader {background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;z-index:5000;display:table;width:100%;height:100%;}  
.loading {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align: center;}  
.loading_in {display:inline-block;padding:40px;background:#FFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px}


PS - думаю этот материал загрузки самый простой как по своему коду и установки на сайт.

Источник: madeas.ru
13.12.2016 Просмотров: 1452 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
iMadeas
iMadeas 13.12.2016 17:501
+3
Таких прелоадеров в сети много, но этот вариант можно улучшить:



- при использовании условных операторов ucoz и изображения, не крутящейся штуки, прыгающих шариков или т.пд., а именно картинки (в нашем случае пусть будет самолёт ) можно сделать интересную загрузку:

1. Берём условные операторы

<?if($WDAY$="Пн")?>, <?if($WDAY$="Вт")?>, ... у вас это может быть Понедельник, Вторник,...

2. Подключаем стиль для класса loading :

Код
.loading {
display:table-cell;
background:#fff url(http://madeas.ru/background/test-04.gif) 50% 50% no-repeat;
background-size:40%;
vertical-align:middle;
text-align: center;
}


3. Добавляем свойство transform (собственно для этого мы и подключаем условный оператор)

Код
.loading {
-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg); transform: rotate(0deg)
}


И получаем самолёт летящий в сторону.

Для того, чтобы самолёт летал в зависимости от дня недели, вы можете поменять в свойстве transform переменную 0deg на свою, например 45deg. Тогда самолёт полетит, хз куда, надо проверять =) Ну вы поняли... удачной реализации.
Kolinkor
Kolinkor 13.12.2016 20:072
0
Нормально, у кого шустрый интернет.
Kosten
Kosten 13.12.2016 20:273
0
Здесь вы сами изображение gif находите и устанавливаете, тут нашел елки, но там покупать нужно, под праздник нормально было бы.

А так могу такие закинуть.

iMadeas
iMadeas 14.12.2016 10:074
0
Для сайтов юкоз есть отличный прелоадер uCoz_loader.gif
Выглядит стильно )
Kolinkor
Kolinkor 14.12.2016 10:135
0
Круто смотрится.
Kosten
Kosten 27.12.2016 04:346
0
Один минус у него, если страница долго загружается, это может виновата любая сторонняя ссылка или баннер, где просто на площадке глюк и по ссылке передается, если говорить о баннере, то придется долго ждать когда страница откроется.
avatar