Прелоадер на сайте

11.03.2021 | Написал

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

1. Добавляем сразу после открывающего тега body блок с прелоадером:

<div class="preloader">
  <svg class="preloader__image" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="#ff3f82"
      d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z">
    </path>
  </svg>
</div>

Саму картинку svg мы можем менять.
2. Ниже прямо в страницу добавлем стили:

<style>
.preloader {position: fixed;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;z-index: 1001;}
.preloader__image {position: relative;top: 50%;left: 50%;width: 32px;height: 32px;margin-top: -16px;margin-left: -16px;text-align: center;animation: preloader-rotate 2s infinite linear;}
@keyframes preloader-rotate {100% {transform: rotate(360deg); }}
.loaded_hiding .preloader {transition: 0.3s opacity; opacity: 0;}
.loaded .preloader {display: none;}	
</style>

Если хотим полностью скрыть страницу, то для блока preloader можно добавить какой-нибудь фон.
3. Ниже добавляем скрипт на чистом JS:

<script>
  window.onload = function () {
    document.body.classList.add('loaded_hiding');
    window.setTimeout(function () {
      document.body.classList.add('loaded');
      document.body.classList.remove('loaded_hiding');
    }, 500);
  }
</script>

Теперь при загрузке страницы мы увидим спиннер, который скроется после полной загрузки страницы.

Метки: ,
Комментарии читателей статьи "Прелоадер на сайте"

Нет комментариев.

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.