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

У многих сразу возникнет вопрос - Зачем?. Ведь по полосе прокрутки и так понятно. Бывает такое, что делается лендинг с разного рода эффектами, когда прокрутка специально скрывается с какими-то целями. С помощью такого вот прогресс-бара, посетитель увидит как идет процесс прокрутки. Вот так будет выглядеть простейший пример работы данного индикатора.

Прокручивая страницу вниз, вверху двигается полоса, показывая прогресс. Если Вас заинтересовал данный фокус или он нужен Вам по другим причинам, затягивать не буду приступим к его осуществлению.

Шаг №1

Как обычно со всем что использует - jQuery в начале нужно определиться с самой библиотекой. Если Вы подключали ее ранее на своем сайте, то этот шаг можно пропустить. В противном случаи Вам нужно в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавить вот такую строку:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Шаг №2

Теперь сам скрипт, который поможет осуществить задумку. Он добавляется сразу после библиотеки, ну или в те же места куда и она, если Вы ее не добавляли.

    <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>

Также данный скрипт, без тегов - script можно прописать в отдельный, который добавить к сайту и подключить как библиотеку, указав лишь правильный путь.

Шаг №3

Теперь ход дошел к HTML разметке. В любое место, после открывающегося body в шапке или в подвале перед закрывающегося bodyДобавляем такую разметку:

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

Шаг №4

Последним и заключительным шагом в этой статье, будет добавление стилей, которые помогут корректно отобразить анимацию. Добавлять нужно в файл стилей где собраны стили CSS Вашего сайта. Часто этот файл называется style.css.

  progress{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background:transparent;
    color:#F00;
  }

  progress::-webkit-progress-bar{
    background:transparent;
    border-radius:5px;
  }

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

  .progress-bar{
    background:#F00;
    width:0%;
    display:block;
    height:inherit;
  }

Как обычно, стили можно править под себя, если Вы разбираетесь в CSS и это не проблема для Вас. Если Ваши навыки не позволяют свободно и с легкостью править, то нужно аккуратно и с осторожностью. 🙂

Если Вам пригодился данный прогресс-бар, можете поделится в комментариях, где Вы его использовали.

На этом все, спасибо за внимание. 🙂