Rosnący pasek postępu podczas przewijania strony

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



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

Przeczytaj również

Kolorowanie co drugiego wiersza css i jQuery ̵... Istnieje wiele metod kolorowania obiektów HTML takich jak tabela czy div. W tym wpisie postaram się przedstawić kilka z nich Standardowo chcąc poko...
Rodzaje kursora myszy Czasami w celu uatrakcyjnienia witryny internetowej chcemy zmienić kształty kursora myszy. Nie potrzebujemy do tego wszędzie obecnego JS wystarczy nam...
Zmiana i rozjaśnienie obrazka po najechaniu kursor... Parę razy w swoim życiu szukałam skryptu dzięki któremu mogę uzyskać efekt rozjaśnienia lub zmiany wyglądu obrazka lub fotografii po najechaniu na nią...
Pudełkowy model strony CSS – box-sizing Model pudełkowy jest jednym z najpopularniejszych sposobów budowania stron. Jak sama nazwa mówi składa się on z pudełek czyli mamy np. jeden duży kont...

Dodaj komentarz

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