Индикатор прогресса чтения используя только HTML & CSS || Reading Progress Bar using only HTML & CSS

Всем привет!

В этом видео вы узнаете, как сделать индикатор прогресса чтения или индикатор шкалы прокрутки страницы, используя только HTML и CSS шаг за шагом.

Итак, давайте посмотрим детально.

У нас вот есть статья, допустим, какой-то текст, изображение.

И когда мы скроллим страницу вниз, как мы видим, сверху у нас появляется индикатор

прокрутки страницы, мы видим, на каком этапе мы сейчас находимся на странице.

Дошли до середины, уже 80%, к примеру, или скроллим самое низ, 100%.

И в этом видео вы узнаете, как сделать такую вот шкалу прокрутки, используя только HTML и CSS шаг за шагом.

Итак, приступим к созданию индикатора шкалы прокрутки.

У нас есть файл index.html, style.css, стили подключены, также подключены шрифты и добавлены простые обнуляющие стили.

Теперь давайте внутри в баги добавим разметку, создадим tag main и внутри main у нас будет размещаться заголовок первого типа с произвольным текстом на 3 слова.

Затем создадим параграф с произвольным текстом, допустим, на 100 слов.

Затем еще один параграф с произвольным текстом на 50 слов.

Затем после него добавим изображение из папки AMG.

Выберем изображение.

Теперь также после изображения можем добавить параграф с произвольным текстом на 250 слов.

Также еще один параграф допустим на 150 слов.

Еще одно изображение добавим.

Выберем из папки такое же.

И допустим добавим еще один параграф.

произвольным текстом на 500 слов.

Теперь давайте откроем страницу и посмотрим, что у нас добавилось.

Главное, чтобы у нас было контента столько, чтобы у нас добавилась вот эта вот шкала прокрутки, мы могли скролить страницу вниз.

Так, теперь давайте стилизуем эти элементы, свернем браузер, свернем Visual Studio Code в стилях здесь

Перейдем в стиле.

В стилях нам нужно обратиться к тегу AMG.

Для него укажем максимальная ширина 100%, чтобы у нас адаптировалось изображение.

Теперь также обращаемся к селектору тега Body.

Для него укажем минимальная высота будет 100VH и в игре он добавит черного цвета.

Сделаем.

Теперь обращаемся к селектору тега Main и для него укажем ширина у него будет

80% и размещение по центру.

Margin, укажем 0, отступ сверху и снизу.

И Auto, автоматические отступы справа и слева.

Как мы видим, элемент размещается по центру.

Также добавим пэддинги, отступы сверху и снизу.

Будут 3 рэм и 0 рэм справа и слева.

Также цвет будет белый для всего контента.

Теперь обращаемся к main и заголовку первого типа.

Для него укажем font-size 5rem, увеличим размер заголовка первого типа.

Теперь также обращаемся к main и к параграфу и зададим следующие стили.

Margin, отступ сверху и снизу между параграфами будет 2rem и 0rem справа и слева.

И font-size укажем 1.7rem.

Итак, давайте посмотрим.

Вот так у нас выглядит, допустим, наша статья на странице.

И есть вот скролл.

Можем скролить вниз, есть два изображения.

Так, теперь давайте создадим нашу шкалу, наш индикатор шкалы прокрутки.

Так, давайте перейдем в индекс HTML, скроем здесь вверх.

И в самом верху страницы создадим идентификатор с названием ProgressBar.

Это будет divs.

Идентификатором, название которого будет ProgressBar.

Теперь давайте перейдем в стиле.

И в стилях нам нужно обратиться к этому идентификатору.

Указываем ProgressBar.

И сделаем для него размещение.

Укажем Position Fixed.

Прижмем его кверху.

Укажем Top 0, Left также 0.

Ширина у него будет 100%, занимать будет всю ширину.

Высота будет 1RM.

Добавим Background.

Background у него будет с ключевым словом цвета Spring Green.

Как мы видим, вот эта шкала добавилась сверху.

Теперь давайте также еще укажем Transform Origin.

И значение укажем Left.

Transform Origin определяет положение точки, относительно которой элемент будет трансформироваться.

Указываем Left, чтобы шкала у нас появлялась с левой стороны.

Укажем Right, будет появляться с правой стороны.

Если не укажем это, свойство и значение будет появляться с центра.

Теперь нам нужно добавить Animation.

Дадим название для анимации Progress и укажем Linear равномерное.

И теперь нам нужно, давайте проскроллим вверх.

И здесь к HTML нам нужно добавить такое свойство, которое называется scroll timeline name.

И дать произвольное название.

Название давайте укажем, допустим, page scroll bar.

Или можно просто указать page scroll или просто scroll.

Это уже как захотите.

Название это дается произвольным.

Скроллим вниз сюда к ProgressBar и здесь нам нужно добавить свойство.

Давайте еще несколько слов о том, что такое ScrollTimelineName.

Это свойство определяет имя именованной временной шкалы прокрутки.

Теперь скроллим здесь к ProgressBar и здесь нам нужно добавить AnimationTimeline.

Оно определяет временную шкалу, которая используется для управления кодом анимации.

И сюда, к Animation Timeline, нам нужно указать то название, которое мы давали для Scroll Timeline Name.

И мы указываем сюда его Page Scroll Bar.

Page Scroll Bar.

Такое же, как и здесь.

Так, теперь нам нужно добавить...

Саму анимацию.

Обращаемся к правилу keyframes.

Указываем название анимации, которое мы задавали сюда для свойства Animation Progress.

Указываем ее сюда.

И 0% у нас будет Transform Scale X. Масштабирование по горизонтали.

Укажем здесь 0.

Как мы видим, эта шкала у нас исчезла.

Копируем этот блок.

Вставляем ниже.

Здесь нам нужно указать 100%.

и Transform Scale X, масштабирование по горизонтали, единица.

Теперь открываем нашу страницу, скроллим ее вниз, и как мы видим, индикатор шкалы прокрутки у нас добавился, и он у нас показывает, сколько уже мы прочитали статьи, допустим, или сколько мы проскролли страницу вниз.

И вот таким вот образом получилось добавить

Индикатор шкалы прокрутки используя только HTML и CSS.

Шаг за шагом.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.