Bez kategorii

Rosnący pasek postępu podczas przewijania strony

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.

Przykłady

SVG Circular Scroll Progress Bar

by Kyle Foster

Oryginalny pasek ładujący się wokół obrazka.

Scrolling progress bar

autor biquet

Pasek postępu przewijania strony przypominający termometr. Tym razem nie znajduje się u góry strony, ale z boku tekstu.

Reading progress scroll indicator

autor Allison Richmond

Pasek postępu pokazuje nam w jakim miejscu na stronie obecnie się znajdujemy. W tym przypadku pasek umieszczony jest u góry strony.

orizontal Scroll Progress Bar

autor Ali Klein

Scroll Progress Bar

autor Jake

Tym razem nie tylko będziemy tworzyć pasek postępu ale również zmieniać kolor tła podczas przewijania strony.

 

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

Rosnący pasek postępu podczas przewijania strony
aurelia

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago