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.
Co znajdziesz w tym wpisie
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.