В этой статье я хочу рассказать как создать прогресс бар. Но для начала необходимо понять, что такое прогресс бар. Прогресс бар - это обычная линия, которая обычно располагается в самом верху сайта. Её ширина зависит от положения ползунка скролла. Если ползунок расположен по середине, то прогресс бар будет занимать половину ширины экрана.
После того, как мы разобрались с тем, что такое прогресс бар, нам необходимо понять, как его сделать. Для создания прогресс бара нам необходимо хотя-бы минимальное знание HTML, CSS и JS. Создаем все необходимые файлы (html,css,js) и открываем их в редакторе кода (я использую sublime text 3). Для начала заполняем базовую структуру html файла и подключаем к нему файлы css и js. Потом создаем обычный блок с классом "scroll". Это должно выглядеть вот так:
С html файлом мы закончили. Теперь можем приступить к нашему css. В нем мы пропишем стили для прогресс бара. Добавляем ему высоту, цвет, делаем его фиксированным относительно положения скролла и прибиваем его к верху.
Со стилями тоже закончили. Если вы откроете ваш html файл в браузере, то вы ничего не увидите. Для того, чтобы увидеть результат, нужно написать скрипт на js. Для этого откройте файл js и просто перепишите все с картинки. После картинки последует объяснение всего написанного.
Сперва получаем наш прогресс бар в переменную. Потом пишем скрипт, который будет выполняться каждый раз, когда будет меняться позиция скролла. В этом скрипте мы получаем отступ сколла от начала страницы, потом получаем длину окна пользователя. Потом мы это делим и полученное значение умножаем на 100 (получится значение от 0 до 100). И под конец мы устанавливаем это значение как ширину прогресс бара. Я вас поздравляю, вы это сделали!
Чтобы протестировать получившийся результат, можно изменить высоту окна. Для этого просто добавляем кучу текста рыбы в html файл или меняем высоту body через css. Вот какой результат должен у вас получиться:
Надеюсь у вас все получилось. Если возникли какие-то проблемы, то можете написать об этом в комментариях или просто перечитать статью. Если же у вас все получилось, я попрошу вас подписаться на меня и посоветовать мне интересную вам тему. Удачи в верстке!