Как сделать прелоадер на своем сайте

Бывают такие ситуации, когда из-за использования большого количества плагинов или из-за большого подключения .сss или .js сайт загружается долго. Конечно надо оптимизировать его. Избавляться от плагинов, уменьшать код и т.д. Но бывают ситуации, когда ты просто не можешь отказаться от них. Я советую в таком случае реализовать на своем сайте прелоадер. Это может сделать более красивую загрузку сайта и уменьшит показатель отказов на вашем сайте.

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

Прежде чем сделать прелоадер на своем сайте, вы должны понимать некоторые вещи:

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

 Что нам нужно сделать

  • Внедрить html код прелоадера
  • Скрыть данным прелоадером все содержимое сайта пока он полностью не загрузится
  • Скрыть прелоадер и показать загруженный сайт

Внедрение

Для начала нам нужно сразу после открывающего тега <body> разместить следующий код:

<div class="preloader">
   <div class="prePreloader"></div>
</div>

div c классом preloader будет перекрывать основной контент, пока не загрузится весь сайт. Для него мы прописываем такие CSS-стили:

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

div c классом prePreloader это сам прелоадер. У меня для него такие CSS-стили:

.prePreloader{
  height: 40px;
  width: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
}
 
.prePreloader:before,
.prePreloader:after {
  content: "";
  height: 40px;
  width: 40px;
  border: 8px solid rgba(255,255,255,.5);
  border-radius: 10px;
  position: absolute;
  top: 0;
}
 
.prePreloader:before {
  animation: animate 2s infinite linear;
}
 
@keyframes animate {
  0% {
    transform: rotate(0) skew(0);
  }
   
  100% {
    transform: rotate(180deg) skew(360deg);
  }
}
 
 
.prePreloader:after {
  animation: animate2 2s infinite linear;
}
 
@keyframes animate2 {
  0% {
    transform: rotate(0) skew(0);
  }
   
  100% {
    transform: rotate(-180deg) skew(-360deg);
  }
}

Теперь нам нужно подключить jQuery, если он у вас еще не подключен, и потом вставить код, который ниже.

Скрипт подключения jQuery:

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Код для прелоадера:

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

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

ДЕМО

Если вы хотите изменить прелоадер, можете воспользоваться ссылками, которые я оставлю ниже, чтобы создать свой, на базе того, который выше.

icons8.com — готовые варианты на чистом CSS и HTML

Preloaders.net — СНГ генератор прелоадеров. Можно выбрать самому вариант и задать ему скорость анимации и цвет.

Если у вас есть вопросы, или нужна помощь, пишите в комментарии, обязательно помогу 🙂
Также подпишитесь на наш наш telegram-канал и соц.сети, чтобы не пропустить новые статьи и новости 😉

Оставьте ответ

comment-avatar

*