Полоса прогресса чтения странницы. JS + CSS или...

Привет друг ! В этой статье попробуем разобраться каким образом мы можем создать элемент, который будет показывать прогресс (скролл) прочтения станицы 🤔.

И так - поехали !🛼

1. Создадим болванку:

export const App = () => {
return (
<div>
<p>bla-bla</p>
</div>
)
};

Не гоже в ручную копипастить тег <p>, доверимся всецело JS.

const paragraphs = Array.from({ length: 50 }, (_, index) => (
<p key={index}>bla - bla {index + 1}</p>
));

В разметке добавим еще один div (в будущем наша полосочка), над переменной paragraphs.

return (
<div>
<div/>
{paragraphs}
</div>
)

2. Накидаем стилей:

App.module.css:
.appContainer {
text-align: center;
padding-top: 20px;

.progressBar {
position: fixed;
top: 0;
left: 0;
height: 4vh;
background-color: #4caf50;
width: 100%;
transform-origin: 0 50%;
}
}

Подключаем стили, и видим, что полоска есть - но анимации нет.

Ну ты понял)

Можно подкинуть JS, и не забыть сделать return в useEffect. Но мы попробуем иначе, на помощь к нам приходит animation-timeline: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility

3. Создаём keyframes и подкидываем свойство animation-timeline: scroll():

.appContainer {
text-align: center;
padding-top: 20px;

.progressBar {
position: fixed;
top: 0;
left: 0;
height: 4vh;
background-color: goldenrod;
width: 100%;
transform-origin: 0 50%;
animation: line-progress linear;
animation-timeline: scroll();
}
}

@keyframes line-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}

И вуаля 🪄: https://dzen.ru/video/watch/6766e6b885b2cb7bf707e1ba

4. Итоговый код:

import s from './App.module.css'

export const App = () => {
const paragraphs = Array.from({ length: 50 }, (_, index) => (
<p key={index}>bla - bla {index + 1}</p>
));

return (
<div className={s.appContainer}>
<div className={s.progressBar}/>
{paragraphs}
</div>
)
};

.appContainer {
text-align: center;
padding-top: 20px;

.progressBar {
position: fixed;
top: 0;
left: 0;
height: 4vh;
background-color: goldenrod;
width: 100%;
transform-origin: 0 50%;
animation: line-progress linear;
animation-timeline: scroll();
}
}

@keyframes line-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}

P.S. IDE что там ругается: Experimental: This is an experimental technology, а вот и причина:

Так, что ждём лисичку. И пока яблочко разродиться )

Ну вот собственно и всё 🚀🚀🚀.

Спасибо за внимание! До Новых Встреч!🤗🤗🤗