Rosnący pasek postępu podczas przewijania strony

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



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ż

Kotwice na stronie HTML – odsyłacze i etykie... Kotwice ang. anchor (etykiety, zakładki) służą do oznaczenia specjalnych obszarów podobnie jak zakładka w książce. Odsyłacz (zakładka) prowadzi do kot...
Wstęp do SASS – Instalacja i podstawowe kome... SASS jest rozszerzeniem języka kaskadowych styli CSS (preprocesorem) umożliwiającym wydajniejszą pracę. Oczywiście nie jest to jedyny tego typu skrypt...
Kończące się tło strony w przypadkowych miejscach... Czasami podczas tworzenia strony internetowej zdarza się, że w nadrzędny (okalający) element (np. div), w którym znajduje się nasze tło kończy się szy...
Tekst 3D na stronie internetowej – CSS Tym razem na mój warsztat trafił dość ciekawy efekt przydatny do wyróżnienia tekstu na stronie. Chodzi oczywiści o tekst 3D, a właściwie o uzyskanie e...