Как сделать прелоадер

Прелоадер для сайтаПривет, друзья. Бывает такое, что из-за использования тяжелых плагинов и сайт грузиться непозволительно долго. В таких случаях я рекомендую избавляться от них, либо искать менее "тяжелый" аналог. Но иногда - его просто нет. В таком случае можно попробовать использовать прелоадер, чтобы немного развлечь (отвлечь) пользователя. Но не все знают, как подобный функционал реализовать...

Первым делом стоит упомянуть, что использование прелоадера целесообразно в случаях, когда долго грузится главный экран или тогда, когда контент грузится кусками. Все это может привести либо к мгновенному уходу пользователя с сайта, либо к негативному впечатлению о компании вцелом.

Как сделать прелоадер для landing page

Прежде чем начать делать preloader, нужно немножко уяснить суть того, как браузер загружает страницу. Не буду расписывать весь цикл, так как у самого довольно абстрактное представление, но важно понять, что в целях экономии времени, браузер грузит (отображает) код поэтапно и не дожидается полной загрузки страницы, а в случае подключения js, так вообще прекращает загрузку, пока не выполнит подключаемый файл. Это значит, что загрузка (отображение) остального контента приостанавливается до полной загрузки js файла. В общем, проблем достаточно, давайте теперь попробуем их решить при помощи прелоадера.

Теперь пару слов для понимания того, что мы делаем:

  • В самом начале размещаем div c прелоадером
  • Скрываем прелодером содержимое сайта до момента полной загрузки страницы
  • Скрываем прелоадер и показываем страницу

Теперь, сразу после открытия тега body разместим следующий div:

<div class="loaderArea">
   <div class="loader"></div>
</div>

Скорее всего, если у вас проблемы с загрузкой сайта, значит у вас много качественных изображений и различных тяжеловесных скриптов, а значит, вы наверняка используете и jQuery, поэтому для того, чтобы наш preloader исчез после того, как загрузится основное содержимое, воспользуемся следующим скриптом:

<script>
  $(window).on('load', function () {
    $preloader = $('.loaderArea'),
      $loader = $preloader.find('.loader');
    $loader.fadeOut();
    $preloader.delay(350).fadeOut('slow');
  });
</script>

Размещайте его где-нибудь после подключения jQuery.

Немного поясню html. LoaderArea - фоновая область, которая перекрывает основной контент. CSS этого дива такой:

.loaderArea {
  background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index: 100000;
}

Loader - это активная область (сам прелоадер). Так как я решил делать его при помощи только CSS, то у него такие стили:

.loader {
  height: 40px;
  width: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
}

.loader:before,
.loader:after {
  content: "";
  height: 40px;
  width: 40px;
  border: 8px solid rgba(255,255,255,.5);
  border-radius: 10px;
  position: absolute;
  top: 0;
}

.loader:before {
  animation: animate 2s infinite linear;
}

@keyframes animate {
  0% {
    transform: rotate(0) skew(0);
  }
  
  100% {
    transform: rotate(180deg) skew(360deg);
  }
}


.loader:after {
  animation: animate2 2s infinite linear;
}

@keyframes animate2 {
  0% {
    transform: rotate(0) skew(0);
  }
  
  100% {
    transform: rotate(-180deg) skew(-360deg);
  }
}

Исходник прелоадера я взял с Codepeen. Вот ссылки на несколько интересных вариантов:

А вы пользуетесь прелоадереми на своих сайтах. Я вот, впервые его использовал. Какие у вас интересные примеры есть?

19 комментариев

  1. John LapTev

    Спасибо)
    Самое простое объяснение как просто можно сделать Прелоадер_)

  2. Умнов Тихон

    Большое спасибо за статью!
    Полезный и на уровне изложенный материал!

  3. Александр

    Молодец!
    Доходчиво и просто очень!

  4. Игорь

    Спасибо за статью! Как сделать демо 2 ?

  5. Алеке

    А как можно сделать прелоадер например со своим логотипом?

    1. dimadv7

      Сделать анимацию своего логотипа, и поставить его в качестве прелоадера...

  6. BHGSDAD

    ЛУЧШИЙ!

  7. Pavel

    Добрый день!
    Спасибо! В принципе статья помогла.

    Но не понимаю, почему код из Вашего примера работает, а вот если вставить код из Демо 4 - нет.

    Что нужно сделать с кодом из Демо 4, чтоб он и на сайте работал, а не только в Codepen, подскажите, пожалуйста?

    1. Отец

      Pavel, потому, что на кодепене как правило используются всеки предпроцессоры типа SASS и так далее, т.е. код в них немного отличается от стандартных html и js.

    2. Uzrealtor

      Добрый день,

      У меня тоже при переносе на сайт демо4 не работает, в чем может быть ошибка

  8. Дмирий

    Добрый день!
    А куда в данном случае вставлять содержимое страницы?

    1. dimadv7

      Дмирий, здравствуйте не понял вопроса. В содержимое страницы нужно вставлять прелоадер, а не наоборот, в статье же написано вроде, что вставляем после body

  9. Дмитрий

    dimadv7, добрый день, я вроде так и делаю, в head вношу скрипт и стили, а сразу после body идет код

    а далее собственно содержимое страницы. Если это важно — содержимое есть фрейм с большим тяжелым документом pdf, который открывается несколько секунд. Как раз на время открытия и нужен прелоадер. Т.е. далее после выше указанного кода в body идет

    В итоге при открытии страницы исправно запускается прелоадер, далее открывается фрейм с документом, а прелоадер так и остается поверх всего.
    Что не так делаю?

    1. dimadv7

      а без фрейма - все ок? Исчезает после загрузки страницы?

  10. Дмитрий

    без фрейма прелоадер так и крутиться, никуда не исчезает. Может, дело в скрипте? Пробовал до скрипта подключать jQuery, не помогает.

  11. dimadv7

    А в консоли ошибок нет? О том, что jQuery нужен - написано в статье. Скрипт поместите перед закрывающим тегом body.

  12. Vlad

    А такой лоадер, только перед загрузкой картинки, может кто посоветовать? Без плагинов, на JS.

  13. Martin

    Как сделать в Вордпресс что бы лоадер грузился только на главной странице?
    Если бы ещё один раз только показывался, то вообще классно было бы.
    (Именно на этом примере)

    1. Дмитрий Давыдов

      Martin, загуглите функцию "is_front_page()", а по поводу только 1 раз. Сделайте пометку в cookies или localstorage.

Добавить комментарий