Блог

Красивый прелоадер для вашего сайта

Принцип установки простой до безобразия:

  1. Вставляем CSS в наш файл стилей, не забывая дать путь к нашему анимированному изображению.
  2. Добавляем HTML код сразу после открывающего тега <body>
  3. И добавляем код на JQuery.
  4. Для работоспособности прелоадера, у вас должна быть подключенная библиотека 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");
});

 

Оставить комментарий

avatar