Как создать progress bar на чистом JavaScript. Линия прогресса для сайта

В данной записи я вас научу создавать Progress Bar. Progress Bar – это линия прогресса, которая увеличивается по мере прокрутки страницы.

HTML

<div id="progress_line"></div>

CSS

#progress_line {
    position: fixed;
    left: 0;
    top: 0;
    width: 0%;
    height: 4px;
    background: red;
}

JavaScript

var line = document.getElementById('progress_line');
window.addEventListener('scroll', progressBar);
       
function progressBar(e) {
   var windowScroll = document.body.scrollTop || 
   document.documentElement.scrollTop;
   var windowHeight = document.documentElement.scrollHeight - 
   document.documentElement.clientHeight; 
   var width_progress_line = windowScroll / windowHeight * 100;
   line.style.width = width_progress_line + '%';
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о