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

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

Неодноразово на сайті викладалися прелоадери для сайту, просто 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>


UCOZ scripts
15146 25.09.14



Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера