Що робити, коли сторінки на твоєму сайті завантажуються по кілька секунд? Перш за все потрібно оптимізувати сайт, оскільки люди зараз зовсім не мають терпіння, і, швидше за все, не будуть чекати, поки сторінка завантажиться, а підуть шукати іншу, швидшу.

А якщо сайт уже оптимізований на всі сто, а все одно трішки "пригальмовує" через велику кількість ефектів чи ще з якихось причин? Тоді потрібно чимсь відвернути увагу читача на тих кілька секунд, щоб він і не подумав про закривання сторінки.

Саме для цього й потрібен прелоадер. Це такий кружечок, що обертається, крутиться, пульсує чи смужечка, яка показує прогрес завантаження. Який завгодно анімаційний елемент, який покаже, що ось-ось – і сторінка відкриється, не втікай, друже! І зараз я покажу, як зробити прелоадер для сайту на WordPress.

Види прелоадерів

Прелоадер можна організувати на базі GIF-анімації, а можна засобами CSS. У першому випадку переходь сюди і обирай прелоадер на свій смак. Якщо ж тобі цікавіший прелоадер на CSS, то дивись тут і тут.

Я обрав останній варіант, оскільки в такому випадку потрібно вносити додатковий код, а не просто блок із картинкою, а я хочу докладно розповісти про способи розміщення прелоадера.

Процес встановлення

Отож, для прикладу, я обрав 1-ий варіант – Квадратик, що повертається в різні сторони. На сайті пропонують вставити до себе на сайт шматочок HTML-коду – для розміщення блоків, та шматочок CSS-розмітки – для візуального оформлення. Поки-що не зачіпаємо цього коду. Шукаємо файл шаблону header.php та поміщаємо в нього (найкраще відразу після тега body) наступний код:

<div class="preloader">
	<div class="preloader-spinner">
		
	</div>
</div>

Всередині цих двох блоків і буде розміщений наш анімований квадратик. Повертаємося до сайту із заготовкою прелоадера та копіюємо звідти HTML-код. В результаті повинно вийти отак:

<div class="preloader">
	<div class="preloader-spinner">
		<div class="spinner"></div>
	</div>
</div>

Тепер шукаємо у шаблоні WordPress файл style.css чи інший файл стилів, який першим завантажується. Додаємо йому властивості фіксованого позиціонування для наших основних блоків .preloader та .preloader-spinner:

.preloader {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 1000000;
}

.preloader .preloader-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

Нижче у тому ж файлі додаємо властивості для оформлення та анімації спінера (із сайту, звідки брали спінер). В тому й різниця – якщо береш GIF-картинку, оці додаткові стилі вже не потрібні:

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

Тепер підключаємо додатковий JS-скрипт до WordPress, або, у крайньому разі, розміщуємо його у підвалі перед закриваючим тегом body у тегах <script></script>:

jQuery(window).load(function () {
	"use strict";
if(  jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0  ){
jQuery(".preloader-spinner").fadeOut();
jQuery(".preloader").delay(1000).fadeOut("slow");
}else{
jQuery(".preloader").css('display','none');
}
});

Даний код буде перевіряти, чи завантажився повністю сайт, якщо так, то приховуватиме блок із прелоадером, щоб той не заважав перегляду сторінки.

Все. Я ж казав – просто 😉