Добавляем на сайт лоадер (спиннер)

Loader — это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких лоадеров, потому что из-за них кажется, что страница загружается дольше, и она отображается полностью только после загрузки всего контента и всех скриптов. Лоадер нужен для страниц, на которых контент перестраивается скриптами, то есть, вы не увидите нормальный вид страницы, пока всё не загрузится, тогда то лучше, чтобы был лоадер и показывал пользователю уже готовую страницу. Если же Ваш контент нормально отображается и нет необходимости ждать загрузки всех скриптов, тогда отказавшись от лоадера, вы визуально ускорите скорость загрузки сайта в два раза.

Простой лоадер с gif-картинкой

HTML

HTML-код ставим внутри тега body, и если сайт большой с большим количеством контента, стилей и скриптов, тогда лучше ставить данный код выше

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

CSS

.loader {
  background: none repeat scroll 0 0 #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.loader .loader_inner {
  background-image: url("../images/preloader.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  height: 60px;
  width: 60px;
  margin-top: -30px;
  margin-left: -30px;
  left: 50%;
  top: 50%;
  position: absolute;
}

JS

Не забываем подключить библиотеку jQuery:

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

Код внутри файла скриптов script.js:

$(window).on("load", function() {
  $(".loader_inner").fadeOut();
  $(".loader").delay(400).fadeOut("slow");
});

Preloader

Используется такая картинка с размерами 128*128, но в CSS мы зададим ей размеры 60*60

Больше красивых лоадеров-картинок можно скачать здесь https://pixelbuddha.net/freebie/flat-preloaders.

Выглядеть это будет так:

0

Простой лоадер без картинки

Изменяется только CSS, но для полноты картины добавлю все части:

HTML

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

CSS

.loader {
  background: none repeat scroll 0 0 #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
}
.loader .loader_inner {
  animation: animate 1.5s linear infinite;
  clip: rect(0, 80px, 80px, 40px);
  height: 80px;
  width: 80px;
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
}
@keyframes animate {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(220deg)
  }
}
.loader .loader_inner:after {
  animation: animate2 1.5s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  content:'';
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: absolute;
}
@keyframes animate2 {
  0% {
    box-shadow: inset #b3dfd8 0 0 0 17px;
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #b3dfd8 0 0 0 2px;
  }
  100% {
    box-shadow: inset #b3dfd8 0 0 0 17px;
    transform: rotate(140deg);
  }
}

JS

Не забываем подключить библиотеку jQuery:

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

Код внутри файла скриптов script.js:

$(window).on("load", function() {
  $(".loader_inner").fadeOut();
  $(".loader").delay(400).fadeOut("slow");
});

Больше CSS-спиннеров можно поискать здесь https://icons8.com/cssload/ru и здесь https://codepen.io/collection/HtAne/.

Выглядеть это будет так:

0

Как правильно оптимизировать картинки для сайта

Постараюсь сделать краткую инструкцию по правильному использованию изображений на сайте. Речь пойдет не об элементах…

Как стилизовать стрелки для input[type=number]

Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или…

Конвертируем SVG-иконку в код для использования в CSS

В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы…

Кнопки «Поделиться в социальных сетях» без сторонних плагинов (Share Social Links)

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…

Ответить