Индикатор прокрутки страницы jQuery

Демо

Ставим в body разметку

<div class="scroll-line"></div>

Не много css для линии.

.scroll-line{
    position: fixed;
    z-index: 999;
    height: 2px;
    background: red;
    width: 0;
    top: 0;
    transition: all 0.3s;
}

В transition регулируем скорость анимации, background и height соответственно цвет и высота. z-index нужен что бы не перекрывалось другими элементами сайта, если у вас перекрывается, можно поднять значение.

scroll()
window.addEventListener('scroll', function(e) {
    scroll()
});
function scroll(){
    var scroll = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    $('.scroll-line').css('width', scroll + '%')
}

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

В самом скрипте простая математика.

Если есть вопросы, задавайте в комментариях или через форму обратной связи.