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

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

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

Как сделать прелоадер для 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. Вот ссылки на несколько интересных вариантов:

• Демо 1
• Демо 2
• Демо 3
• Демо 4
• Демо 5

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