Установка прелоадера на сайт uCoz

Установка прелоадера на сайт uCoz

02.08.201447646

Неоднократно на сайте выкладывались прелоадеры для сайта, просто GIF анимации, но о том, как их использовать не уточнялось. В этой статье рассматривается установка прелоадера на сайт uCoz.

Сделано по-простому. Создадим фиксированный блок, который будет занимать все пространство поверх сайта. Далее в этот блок помещаем изображение, центрируем его, но поскольку изображение имеет свой белый фон, оборачиваем в еще один блок и округляем его углы. Этот блок по умолчанию открыт, закрывается после полной загрузки страницы сайта.

Установка

Вставьте код в «Нижнюю часть сайта»:

Код
<div class="someclass">  
<div class="loading">  
<div class="loading_in">  
<img src="http://yraaa.ru/_pu/21/96994448.gif" alt="" />
</div>  
</div>  
</div>  
<script type="text/javascript">  
jQuery(function($) {  
$(window).load(function () {  
$(".someclass").fadeOut(700);  
});  
});  
</script>

<style type="text/css">
.someclass {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}
</style>

Чтобы придать уникальности, достаточно заменить изображение на свое. В примере используется изображение из материала Flat прелоадеры.




Сохраните в социальную сеть
Комментарии (6)
Nikola 03.08.2014 в 18:54Спам
На поисковики не повлияет?
1
ilhom 26.11.2014 в 07:22Спам
На поисковики не повлияет?
0
Не должно, в принципе. Просто будет немного дольше грузить сайт. Плохо только для тех у кого слабый компьютер.
0
Александр 09.06.2015 в 18:08Спам
Анимация при проигрывании тормозит
0
А время увеличить можно?)
0
umut kara 23.02.2016 в 23:21Спам
Нет, так как прелоадер закрывается автоматически после полной загрузки сайта
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт