Rosnący pasek postępu podczas przewijania strony

Kategoria wpisu Frontend, Inspiracje, Kursy Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *