Як додати прогрес-бар на сайт: детальний гайд

прогрес-бар на сайті, створений за допомогою HTML, CSS і JavaScript

Прогрес-бар є одним з найкорисніших інструментів для веб-дизайну, що дозволяє користувачам отримувати візуальне відображення процесу завантаження або виконання певної дії на веб-сайті. Він може бути використаний для показу прогресу завантаження сторінки, відправки форми, завантаження вмісту або будь-якого іншого процесу, який відбувається на веб-сайті. У цій статті ми розглянемо той випадок, коли у верхній частині сайту буде відображатись прогрес переглянутого контенту сторінки при її скролінгу.

Відео: так буде виглядати прогрес-бар при скролі сторінки

Прогрес-бар може мати різні вигляди та стилі, залежно від дизайну веб-сайту. Він може бути горизонтальним або вертикальним, забарвленим або з використанням певних ефектів, таких як анімація або перехідні ефекти. Головна мета прогрес-бару — надати користувачеві чітку інформацію про те, наскільки далеко він знаходиться у процесі завершення певного завдання.

Як додати прогрес-бар на сайт?

Отже, давайте переходити безпосередньо до додавання прогрес-бару на сайт. Для цього нам потрібно використати HTML, CSS і JavaScript код.

Спочатку у позиції сайту (шаблону), де ви хочете відображати прогрес-бар треба додати наступний HTML код:

<div class="progress-bar" id="progressBar"></div>

Потім додаємо CSS код у файл зі стилями вашого сайту, а саме:

.progress-bar {
    background: #ff4163;
    height: 10px;
    width: 0%;
    position: fixed;
    top: 0;
    z-index: 1;
}

Примітка Безумовно, якщо вас не буде влаштовувати колір бару чи його товщина, то їх можна змінити на бажані у цих стилях.

І, нарешті, залишився JavaScript код. Його потрібно вставити між тегами <head> </head> вашого сайту:

<script type="text/javascript">
window.addEventListener('scroll', handleScroll);

function handleScroll() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;  
    var scrolled = (winScroll / height) * 100;
  
    document.getElementById("progressBar").style.width = scrolled + "%";
}
</script>

Висновок

Прогрес-бар — це важливий елемент веб-дизайну, який надає користувачеві візуальну інформацію про прогрес виконання завдання або процесу. Незалежно від його вигляду та стилю, головна мета прогрес-бару полягає у наданні користувачеві чіткої інформації про те, наскільки далеко він знаходиться у процесі завершення певного завдання. Зважаючи на ці переваги, рекомендується додавати прогрес-бар на своєму веб-сайті для поліпшення користувацького досвіду.