Jak zrobić taki progress bar który w miarę czytania tekstu będzie się zwiększaj aż osiągnie 100%?

0

Jak zrobić taki progress bar który w miarę czytania tekstu będzie się zwiększaj aż osiągnie 100%,tak jak na blogu www.p-programowanie.pl/ ?
Mam taki kod html <progress id="page-progress" value="4.67551622418879" max="100"></progress> i CSS css progress {position:fixed;top: 0} Szukałem w Google i nic nie znalazłem.Bardzo proszę o pomoc.

1
  1. Musisz się podpiąć pod zdarzenie które się wywołuje jak robimy scroll (onscroll).
  2. Podczas tego zdarzenia musisz pobrać wysokość całej strony (może body height, ale nie jestem pewny) oraz ile już przewinąłeś od góry (tutaj wpisz w google coś typu scroll top all page value albo coś takiego).
  3. Jak już masz te 2 rzeczy to robisz proste równanie (height strony = 100%, przewinięte od góry = x%, obliczasz x) i aktualizujesz value w progress o ten x.
0

@Markuz: trzeba by chyba jeszcze odjąć wysokość viewportu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1