Progress bar, który rozszerza się podczas przewijania strony internetowej

Front-end 13 października 2021

Skoro przeglądasz tego bloga, to jest spore prawdopodobieństwo, że śledzisz również inne, na których można spotkać się z dość ciekawym efektem. Chodzi o pasek postępu, zapełniający się wraz z przewijaniem konkretnej witryny.

Właśnie w tym wpisie chciałbym pokazać Ci jak w nieskomplikowany sposób można stworzyć coś podobnego. Wszystko wykonamy w czystym JavaScript’cie!

Demo możesz podejrzeć już od razu, w tym oto miejscu:

See the Pen Progress Bar by Robert Orliński (@ROrlilnski) on CodePen.

Szkielet HTML

Wszystko zaczyna się od struktury HTML. W tym przypadku jest dość prosta, a wygląda dokładnie w ten sposób:

<progress class="progress-bar" id="progress-bar" max="100" value="0">Strona przewinięta w 0 %</progress>

Używamy tutaj semantycznego znacznika <progress />, który zaraz ostylujemy, a później ożywimy za pomocą JavaScriptu. Ustawiamy mu klasę, po której będziemy stylować, id, po którym złapiemy go w JSie oraz maksymalną wartość, która równa będzie przewinięciu strony w 100%.

Dodatkowo ustawiamy wartość początkową zapełnienia naszego paska na 0 i tekst, który pokaże się, gdy ktoś wejdzie na naszą stronę z przeglądarki, która nie obsługuje elementu <progress />.

Kod CSS

Zawiera się w tych oto liniach:

.progress-bar {
  position: fixed;
  width: 100%;
  height: 6px;
  top: 0;
  left: 0;
  
  border: none;

  background-color: transparent;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  &::-webkit-progress-bar {
    background-color: transparent;
  }

  &::-webkit-progress-value {
    background-color: #0091ea;
  }

  &::-moz-progress-bar {
    background-color: #0091ea;
  }
}

Na początku stylujemy kontener, w którym zawiera się nasz progress bar - pozycjonujemy go w taki sposób, aby cały czas znajdował się na samej górze okna przeglądarki.

Reszta to usunięcie domyślnych styli przeglądarek oraz ustawienie przezroczystego "koloru" dla niewypełnionej części paska, jak i niebieskiego dla wypełnionej.

Część najważniejsza - kod JavaScript

Posiadamy już kod HTML oraz CSS, więc teraz pora sprawić, aby nasz pasek zaczął działać w pożądany sposób. Pokażę Ci cały kod, a później omówimy go sobie krok po kroku:

const progressBar = document.querySelector('#progress-bar');

const documentHeight = document.documentElement.offsetHeight;
const windowHeight = window.innerHeight;

const updateProgressBar = () => {
  const windowTopEdge = window.scrollY;
  const totalScroll = (windowTopEdge / (documentHeight - windowHeight)) * 100;
  const totalScrollRounded = totalScroll.toFixed(2); 

  progressBar.setAttribute('value', totalScrollRounded);
  progressBar.textContent = Strona przewinięta w ${totalScrollRounded} %;
}

window.addEventListener('scroll', updateProgressBar);
updateProgressBar();

Pozwolę sobie pominąć pierwsze 7 linii, bo nazwy zmiennych wydają się mówić same za siebie 😌

Ale za to możemy pochylić się nad tym oto krótkim wzorem:

const totalScroll = (windowTopEdge / (documentHeight - windowHeight)) * 100;

Prześledźmy go po kolei.

W najgłębszej jego części, znaleźć możemy proste odejmowanie wysokości okna przeglądarki, od wysokości dokumentu. Dzięki temu, gdy dojedziemy do końca naszej strony, nasz progress bar nie pokaże wartości poniżej 100% (w końcu górna krawędź przeglądarki nie znajduje się na samej dole strony), a równiutkie 100%.

Oczywiście przy założeniu, że zapiszemy resztę obliczeń, czyli gdy przez otrzymaną z odejmowania wartość podzielimy odległość górnej krawędzi naszego okna od początku dokumentu.

W ten sposób otrzymamy wartość mniejszą od 1, którą w tej chwili wystarczy pomnożyć razy 100, aby otrzymać dokładny postęp scrollowania, wyrażony już w procentach.

Natomiast! Procenty te są bardzo dokładne i podczas scrollowania otrzymujemy wartości ze sporą ilością liczb po przecinku, stąd przyda nam się kolejna linia, która zaokrągli je tylko do dwóch cyfr:

const totalScrollRounded = totalScroll.toFixed(2);

Reszta jest już prostym kodem, który aktualizuje nasz progress bar, o aktualny "stopień przescrollowania witryny":

progressBar.setAttribute('value', totalScrollRounded);
progressBar.textContent = Strona przewinięta w ${totalScrollRounded} %;

A na koniec podpinamy naszą funkcję pod event scroll oraz dodatkowo wykonujemy, aby zapewnić właściwą wartość scrolla dla osoby, która trafia na stronę w na przykład jej połowie, a nie od samego początku:

window.addEventListener('scroll', updateProgressBar);
updateProgressBar();

I to będzie z mojej strony na tyle, bo nasz progress bar działa 🎉

Ale! Jeśli tylko chcesz, to zawsze możesz ulepszyć zaproponowany przeze mnie skrypt. Mianowicie:

Podsumowanie

Tak oto powstał nasz pasek postępu!

Na koniec podrzucam jeszcze raz demo z początku i powolutku będę Cię już żegnać:

See the Pen Progress Bar by Robert Orliński (@ROrlilnski) on CodePen.

Także mam nadzieję, że ten poradnik, jak i sam efekt, okaże się dla Ciebie przydatny i urozmaici tworzone przez Ciebie strony internetowe 🌸

Komentarze

Może dodasz coś od siebie?