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ż

Lista wypunktowana – HTML/CSS Jednym z najczęściej występujących na stronach internetowych lista. Występuje ona praktycznie na każdej stronie choć nie koniecznie jest ona widoczna ...
Instalacja i konfiguracja darmowego serwera na ko... XAMPP to darmowy serwer lokalny, wydany  na licencji GNU GPL. Serwer oparty jest o apache, obsługuje PHP oraz umożliwia utworzenie bazy MySQL. Dodatk...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Zanikające, przenikające obrazy – animacje z... Tym razem pokażę jak w prosty sposób wykonać ciekawą animacje na zdjęciach z użyciem CSS i JavaScript (jQuery) lub z samym CSS. Zamiana obrazków po...