/ it Новости / Красивый индикатор прокрутки (Progress Bar)

Красивый индикатор прокрутки (Progress Bar)

Красивый индикатор прокрутки (Progress Bar)

2 896 · 26 мая 2017 в 17:42 ·
В этой статье мы познакомимся с такой вещью как Progress Bar и сделаем очень красивый индикатор прокрутки, подходящий для любого веб сайта.
Полоса прокрутки или же индикатор прокрутки это полезная вещь на любом сайте, так как она выглядит стильно и позволяет пользователю понять в какой части сайта он сейчас находится. К примеру, на нашем сайте тоже есть такая полоса и вы можете её заметить в самом верху страницы. Она увеличивается вместе с прокруткой самой страницы.



Как можно сделать индикатор прокрутки (Progress Bar)?

Для реализации подобного нам придется использовать скрипт, написанный на jQuery, поэтому первым делом необходимо подключить сам jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
После этого напишем сам скрипт, который будет создавать наш Progress Bar:

$(window).scroll (function () {
  var ratio = $(document).scrollTop () / (($(document).height () - $(window).height ()) / 100);
  $("#progress").width (ratio + "%");
});
Сам индикатор будет отображаться в div'е с идентификатором progress. Итак, создадим следующий HTML код:

<div id="cont">
  <div id="progress"></div>
</div>
Осталось только добавить стили ко всему этому. Минимальный набор стилей:

* {
  margin: 0;
  padding: 0;
}

#cont {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  height: 2px;
  z-index: 9999;
}

#progress {
  background: #ED5E42;
  width: 0%;
  height: 2px;
}
Если хотите проверить работу на пустой странице, то добавьте этот стиль, чтобы у вас была прокрутка: html { height: 2500px }.

Дополнительный стиль

Чтобы все выглядело еще лучше вы можете использовать градиент вместо простой заливки одним цветом весь блок. Для этого вы можете воспользоваться генератором градиентов.

Индикатор полностью готов! Вам нужно немного подправить стили, чтобы он вписывался в общий дизайн вашего сайта, но это уже мелочи :)

Больше интересных новостей