Полоса прокрутки или же индикатор прокрутки это полезная вещь на любом сайте, так как она выглядит стильно и позволяет пользователю понять в какой части сайта он сейчас находится. К примеру, на нашем сайте тоже есть такая полоса и вы можете её заметить в самом верху страницы. Она увеличивается вместе с прокруткой самой страницы.
Как можно сделать индикатор прокрутки (Progress Bar)?
Для реализации подобного нам придется использовать скрипт, написанный на jQuery, поэтому первым делом необходимо подключить сам jQuery:
Если хотите проверить работу на пустой странице,
то добавьте этот стиль, чтобы у вас была прокрутка: html { height: 2500px }.
Дополнительный стиль
Чтобы все выглядело еще лучше вы можете использовать градиент вместо простой заливки одним цветом весь блок. Для этого вы можете воспользоваться генератором градиентов.
Индикатор полностью готов! Вам нужно немного подправить стили, чтобы он вписывался в общий дизайн вашего сайта, но это уже мелочи :)