Установка прелоадера на сайт uCoz
Неоднократно на сайте выкладывались прелоадеры для сайта, просто GIF анимации, но о том, как их использовать не уточнялось. В этой статье рассматривается установка прелоадера на сайт uCoz.
Сделано по-простому. Создадим фиксированный блок, который будет занимать все пространство поверх сайта. Далее в этот блок помещаем изображение, центрируем его, но поскольку изображение имеет свой белый фон, оборачиваем в еще один блок и округляем его углы. Этот блок по умолчанию открыт, закрывается после полной загрузки страницы сайта.
Установка
Вставьте код в «Нижнюю часть сайта»:
Код
<div class="someclass">
<div class="loading">
<div class="loading_in">
<img src="https://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>
<div class="loading">
<div class="loading_in">
<img src="https://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 прелоадеры.
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (6)
0
0
0
0
1
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
