В этой статье я хочу рассказать как создать прогресс бар. Но для начала необходимо понять, что такое прогресс бар. Прогресс бар - это обычная линия, которая обычно располагается в самом верху сайта. Её ширина зависит от положения ползунка скролла. Если ползунок расположен по середине, то прогресс бар будет занимать половину ширины экрана. После того, как мы разобрались с тем, что такое прогресс бар, нам необходимо понять, как его сделать. Для создания прогресс бара нам необходимо хотя-бы минимальное знание HTML, CSS и JS...

Сегодня будем делать прогресс-бар. Он может помочь вашим пользователем понять, много ли осталось читать. Все вместе решение занимает 20 строк. Демо на codepen. Раз Создаем HTML разметку: <div class="line" id="line"></div> Добавили класс для оформления и id для связки с js. Два Накинем немного css оформления: .line { width: 0; background-color: yellow; height: 5px; position: fixed; left: 0; top: 0; transition: .3s all; } body { min-height: 1000px; background-color: #333; } Линию сделали фиксированной с нулевой шириной и высотой в 5px, сделали желтый фон...