Власний індикатор завантаження сторінки

Існує безліч способів надати сайту унікальності, створити його особливим. Для цього ми постійно вдосконалюємо дизайн сайту, додаємо нові можливості в функціонал. Але одним з елементів, який виділить ваш сайт серед інших - це індикатор завантаження сторінки, власний індикатор завантаження сторінки. Як правило, сторінка не може завантажитися нас дуже швидко, а в цей час, поки сторінка завантажується, можна вивести гарний індикатор завантаження.

Для створення індикатора завантаження ми будемо використовувати плагін Pace.js. Цей плагін призначений для створення гарних індикаторів завантажень вашому сайті. Смуга завантаження заповнюється автоматично, використовуючи AJAX запити.

Завантажити даний плагін можна - тут.

Відео: Індикатор завантаження CPU без МК!

Як встановити індикатор завантаження на свій сайт?

1 крок. Викачуємо даний плагін, разархивируем в папку, де у вас лежать всі скрипти.

Потім підключаємо даний плагін, вставляючи даний плагін між тегами :

123

lt;headgt;lt;script src="Pace.min.js"gt; lt;/scriptgt;lt;/headgt;

2 крок. Вибираємо колір індикатора завантаження.

Переходимо за адресою - посилання.

Там бачимо наступне поле для введення:

Тут в шістнадцятковому вигляді вводимо колір, який підходить по кольоровій гамі вашої теми. Раджу для цього використовувати програму ColorMania.

3 крок. Вибираємо стиль індикатора завантаження.

Спускаємося трохи нижче і вибираємо сподобався індикатор завантаження.

Натискаємо на посилання "Download» і побачите CSS код. Його необхідно скопіювати і вставити в файл стилів вашої теми.

4 крок. Вставляємо один рядок javascript.

Також між тегами вставляємо наступний код:

Відео: DevelNext [Урок # 11] - Індикатор Завантаження (Компонент)

1

lt;script data-pace-options=`{ "Ajax": false}` src=`Pace.js`gt; lt;/scriptgt;

висновок

Pace.js підтримує IE8 +, FF 3.5+, Chrome, Safari 4 +, Opera 10.5 +, і всі сучасні мобільні браузери. Погодьтеся, мати власну смугу завантаження, буде відрізняти ваш сайт від всіх інших.

Успіхів!

джерело: https://hongkiat.com/blog/pacejs-progress-bar/