Pasek postępu przewijania
Cienka linia na górze strony rośnie razem z przewijaniem - czytelnik widzi, ile jeszcze zostało do końca.
Pasek postępu mówi czytelnikowi, ile jeszcze zostało do końca. Przy długim wpisie na blogu, poradniku albo opisie oferty to prosta informacja: warto doczytać, bo koniec jest blisko.
Linia rośnie od lewej do prawej razem z przewijaniem. Gdy przewijasz w górę, kurczy się tą samą drogą. Nie pyta o zgodę, nie zasłania treści i nie wymaga żadnej interakcji.
Technicznie to jeden element o wysokości dwóch pikseli. W nowoczesnych przeglądarkach jego długość liczy sam CSS z pozycji przewijania, poza głównym wątkiem, więc nie obciąża strony.
Na tej witrynie taka linia jest na górze każdej podstrony, nad paskiem z logo. Przewiń ten tekst w ramce, a zobaczysz ten sam efekt w mniejszej skali.
Przy włączonym w systemie ograniczeniu ruchu pasek nie jest pokazywany, bo ruch nie jest potrzebny do przeczytania treści.
Pasek najlepiej sprawdza się tam, gdzie tekst jest długi. Na krótkich stronach, które mieszczą się w jednym ekranie, nic nie wnosi i lepiej go nie dodawać.
Przewijaj tekst w ramce kółkiem myszy, palcem albo klawiszami strzałek (kliknij w ramkę).
Co to daje
Czytelnik od razu wie, czy tekst jest długi i jak blisko końca się znajduje, więc częściej doczytuje do końca. Pasek nie zasłania treści, nie wymaga klikania i kurczy się, gdy przewijasz w górę.
Kiedy to ma sens
Dla długich wpisów na blogu, poradników i szerokich opisów oferty. Na krótkiej stronie niczego nie wnosi.
Ile waży
Skrypt 0,7 kB wspólny z ujawnianiem sekcji (w nowoczesnych przeglądarkach pasek liczy sam CSS, bez JS). Ten pokaz dokłada ok. 0,3 kB skryptu zapasowego i 0,5 kB stylów.
Skrypt ok. 0,3 kB · style ok. 0,5 kB (po kompresji)