ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Прелоадер для сайта на чистом CSS + HTML

Прелоадер для сайта на чистом CSS + HTML

Здесь представлен полноценный код на прелоадер, а значит все будет корректно смотреться, где при загрузки страницы исчезнет установленный дизайн. А точнее есть просто прелоадер, это второй материал на данной страницы, вот как раз мы его будем размещать в основной код, что идет первым. Что по установке, то здесь вам должно понятно, где для начала ставим главный код, и уже после копируем HTML и прописываем вместо записи, как элементы прелоадера. Только в этом случаи все будет грамотно работать, но для начало нужно грамотно расставить основу.

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

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

Как сделать отображения прелоадера на сайте

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

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

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

Создать работу прелоадер:

HTML

Код

CSS

Код

.preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.5s;
  opacity: 1;
}
.preloader-remove {
  opacity: 0;
  z-index: -10;
}

Код

window.onload = function() {
document.querySelector('.preloader').classList.add("preloader-remove");
};

jQuery

Код

$(window).on('load', function () {
$('.preloader').addClass("preloader-remove");
});

Как понимаете, без данного кода просто при загрузки страницы пролайдер не исчезнет, ведь класс preloader-remove - этот тот класс, что отвечает за исчезновение загрузчика, как только страница полностью загрузилась.

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

Первый вариант:

HTML

Код

CSS

Код

.first_variation {
  width: auto;
  height: auto;
}

.first_variation ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  animation: first_variation-rot 16s linear infinite;
}
@keyframes first_variation-rot {
  100% {
  transform: rotate(360deg);
  }
}
.first_variation li {
  width: 40px;
  height: 40px;
  background: #337AB7;
  border-radius: 4px;
  animation: first_variation-scale 0.8s linear alternate infinite;
}
@keyframes first_variation-scale {
  100% {
  transform: scale(0.1);
  opacity: 0;
  }
}
.first_variation li:nth-child(1) {
  z-index: 24;
}
.first_variation li:nth-child(2) {
  z-index: 23;
}
.first_variation li:nth-child(3) {
  z-index: 22;
}
.first_variation li:nth-child(4) {
  z-index: 21;
}
.first_variation li:nth-child(5) {
  z-index: 20;
}
.first_variation li:nth-child(6) {
  z-index: 19;
}
.first_variation li:nth-child(7) {
  z-index: 18;
}
.first_variation li:nth-child(8) {
  z-index: 17;
}
.first_variation li:nth-child(9) {
  z-index: 16;
}
.first_variation li:nth-child(10) {
  z-index: 15;
}
.first_variation li:nth-child(11) {
  z-index: 14;
}
.first_variation li:nth-child(12) {
  z-index: 13;
}
.first_variation li:nth-child(13) {
  z-index: 12;
}
.first_variation li:nth-child(14) {
  z-index: 11;
}
.first_variation li:nth-child(15) {
  z-index: 10;
}
.first_variation li:nth-child(16) {
  z-index: 9;
}
.first_variation li:nth-child(17) {
  z-index: 8;
}
.first_variation li:nth-child(18) {
  z-index: 7;
}
.first_variation li:nth-child(19) {
  z-index: 6;
}
.first_variation li:nth-child(20) {
  z-index: 5;
}
.first_variation li:nth-child(21) {
  z-index: 4;
}
.first_variation li:nth-child(22) {
  z-index: 3;
}
.first_variation li:nth-child(23) {
  z-index: 2;
}
.first_variation li:nth-child(24) {
  z-index: 1;
}
.first_variation li:nth-child(25) {
  z-index: 0;
}
.first_variation li:nth-child(1) {
  animation-delay: 0.1s;
}
.first_variation li:nth-child(7) {
  animation-delay: 0.3s;
}
.first_variation li:nth-child(13) {
  animation-delay: 0.5s;
}
.first_variation li:nth-child(19) {
  animation-delay: 0.7s;
}
.first_variation li:nth-child(24) {
  animation-delay: 0.9s;
}
.first_variation li:nth-child(2) {
  animation-delay: 0.2s;
}
.first_variation li:nth-child(8) {
  animation-delay: 0.4s;
}
.first_variation li:nth-child(14) {
  animation-delay: 0.6s;
}
.first_variation li:nth-child(20) {
  animation-delay: 0.8s;
}
.first_variation li:nth-child(3) {
  animation-delay: 0.3s;
}
.first_variation li:nth-child(9) {
  animation-delay: 0.5s;
}
.first_variation li:nth-child(15) {
  animation-delay: 0.7s;
}
.first_variation li:nth-child(4) {
  animation-delay: 0.4s;
}
.first_variation li:nth-child(10) {
  animation-delay: 0.6s;
}
.first_variation li:nth-child(5) {
  animation-delay: 0.5s;
}
.first_variation li:nth-child(1) {
  animation-delay: 0.1s;
}
.first_variation li:nth-child(6) {
  animation-delay: 0.2s;
}
.first_variation li:nth-child(11) {
  animation-delay: 0.3s;
}
.first_variation li:nth-child(16) {
  animation-delay: 0.4s;
}
.first_variation li:nth-child(21) {
  animation-delay: 0.5s;
}
.first_variation li:nth-child(7) {
  animation-delay: 0.3s;
}
.first_variation li:nth-child(12) {
  animation-delay: 0.4s;
}
.first_variation li:nth-child(17) {
  animation-delay: 0.5s;
}
.first_variation li:nth-child(22) {
  animation-delay: 0.6s;
}
.first_variation li:nth-child(13) {
  animation-delay: 0.5s;
}
.first_variation li:nth-child(18) {
  animation-delay: 0.6s;
}
.first_variation li:nth-child(23) {
  animation-delay: 0.7s;
}
.first_variation li:nth-child(19) {
  animation-delay: 0.7s;
}
.first_variation li:nth-child(24) {
  animation-delay: 0.8s;
}
.first_variation li:nth-child(25) {
  animation-delay: 0.9s;
}

На этом установочный процесс завершен.

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

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

Демонстрация

Источник: atuin.ru

31 Июля 2023 Загрузок: 4 Просмотров: 877 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0