» » » Установка прелоадера на сайт 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
2501 25.09.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру