Блог
Красивый прелоадер для вашего сайта
Принцип установки простой до безобразия:
- Вставляем CSS в наш файл стилей, не забывая дать путь к нашему анимированному изображению.
- Добавляем HTML код сразу после открывающего тега <body>
- И добавляем код на JQuery.
- Для работоспособности прелоадера, у вас должна быть подключенная библиотека JQuery.
/*--------------------------
-- PRELOADER
--------------------------*/
.loader {
background: none repeat scroll 0 0 #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.loader-inner {
background-image: url("img/preload.gif");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100px;
width: 100px;
margin: auto;
top: 0;
right: 0;
left: 0;
bottom: 0;
position: absolute;
}
/*--------------------------
-- PRELOADER end
--------------------------*/
<div class="loader">
<div class="loader-inner"></div>
</div>
$(document).ready(function(){
$(".loader-inner").fadeOut();
$(".loader").delay(400).fadeOut("slow");
});
Оставить комментарий