Прогресс бар прокрутки страницы

Пример будет состоять из 4 основных шагов. И так приступим к реализации прогресс бара (индикатора) прокрутки страницы.

1. Подключаем jQuery в случае, если вы еще этого не сделали:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. Теперь подключаем сам скрипт. Добавляйте его под подключением jQuery:

<script>
    $(function() {
        $(window).on("scroll resize", function() {
            var o = $(window).scrollTop() / ($(document).height() - $(window).height());
            $(".progress-bar").css({
                "width": (100 * o | 0) + "%"
            });
            $('progress')[0].value = o;
        })
    });
</script>

Для удобства, этот скрипт можно вынести в отдельный js файл.

3. Добавляем HTML код нашего прогресс бара прокрутки страницы. Его можно добавить в любое место (например, после открывающегося тега body, или перед закрывающимся тегом body):

<progress value="0">
    <div class="progress-container">
        <span class="progress-bar"></span>
    </div>
</progress>

4. Заключительный шаг - добавление стилей для нашего прогресс бара (индикатора) прокрутки страницы:

progress{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background:transparent;
    color:#002c68;
}
progress::-webkit-progress-bar{
    background:transparent;
    border-radius:5px;
}
progress::-webkit-progress-value{
    background:#002c68;
    border-radius:5px;
}
progress::-moz-progress-bar{
    background:#002c68;
    border-radius:5px;
}
.progress-container{
    width:100%;
    background:transparent;
    position:fixed;
    top:0;
    left:0;
    height:5px;
    display:block;
}
.progress-bar{
    background:#002c68;
    width:0%;
    display:block;
    height:inherit;
}

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

Все, прогресс бар (индикатор) прокрутки страницы готово.