Rosnący pasek postępu podczas przewijania strony

Czas czytania: < 1 minut

Rosnący pasek postępu podczas przewijania strony internetowej to często mało widoczna animacja. Dzięki niej możemy zobaczyć, w którym miejscu witryny aktualnie się znajdujemy – na początku, środku czy może na końcu. Pasek będzie pokazywał w tedy inną wartoś w postaci ładowania.

Oczywiście nie każdy pasek musi wyglądać jak zwykła linia lub poziomy wąski pasek. W praktyce może przybrać dowolny wygląd.

SVG Circular Scroll Progress Bar

by Kyle Foster

Oryginalny pasek ładujący się wokół obrazka.

See the Pen SVG Circular Scroll Progress Bar by Kyle Foster (@hkfoster) on CodePen.0

Scrolling progress bar

by biquet

Pasek postępu przewijania strony przypominający termometr. Tym razem nie znajduje się u góry strony, ale z boku tekstu.

See the Pen Scrolling progress bar by biquet (@be-key) on CodePen.0

page scroll progress bar

by 0100000101010011

Tym razem rolę paska postępu pełnią ładujące się przyciski po prawej stronie tekstu. Po przeczytaniu lub przejściu do kolejnego „rozdziału” przyciski zmieniają barwę. (żeby w pełni zobaczyć pasek trzeba wejść na stronę codepen)

See the Pen page scroll progress bar by 0100000101010011 (@_sanchez) on CodePen.0

orizontal Scroll Progress Bar

by Ali Klein

See the Pen Horizontal Scroll Progress Bar by Ali Klein (@AliKlein) on CodePen.0

Scroll Progress Bar

by Jake

Tym razem nie tylko będziemy tworzyć pasek postępu ale również zmieniać kolor tła podczas przewijania strony.

See the Pen Scroll Progress Bar by Jake (@Jake-Mullen) on CodePen.0

 

Dodatkowe tagi
Ile do końca wpisu? Pasek postępu czytania
w którym miejscu w artykule jestem się znajduje
pasek postępu we wskazanym przez nas położeniu
przykładowy, przykłady pasku pasków postępu
Pasek postępu, który rozszerza się podczas przewijania strony internetowej