W dzisiejszych czasach użytkownicy oczekują, że strony internetowe będą ładować się błyskawicznie. Nawet kilka sekund opóźnienia może skutkować opuszczeniem strony internetowej. Właśnie dlatego coraz większą popularność zyskują preloadery, czyli animacje wyświetlane podczas ładowania zawartości strony www.
Co to jest preloader?
Preloader to element interfejsu użytkownika, który pojawia się w momencie ładowania strony lub jej komponentów, np. zdjęć lub filmów. Może to być prosty obrazek, animacja, pasek postępu lub niestandardowa grafika, która przyciąga uwagę użytkownika i sygnalizuje, że coś się dzieje w tle strony internetowej.
Dlaczego warto korzystać z preloaders?
Stosowanie preloaderów niesie za sobą wiele korzyści, zarówno dla właścicieli stron, jak i dla użytkowników:
- Poprawa UX (ang. User Experience) – zamiast pustego ekranu użytkownik widzi aktywny element, co zmniejsza odczuwalne oczekiwanie na załadowanie docelowej treści.
- Budowanie wizerunku – kreatywny preloader może podkreślić charakter marki i uatrakcyjnić stronę internetową. Na przykład dla księgarni może to być książka zmieniająca strony, a dla firmy kurierskiej symulacja pakowanej paczki.
- Zwiększenie konwersji – użytkownicy dłużej zostają na stronie, jeśli widzą, że ładowanie trwa i zaraz zobaczą właściwą treść.
Gdzie najlepiej stosować preloaders?
Wszędzie, gdzie czas oczekiwania na ładowany element jest znaczący. Użytkownicy, którzy wczytują stronę na telefonie, ze słabym dostępem do Internetu, często muszą oczekiwać znaczną ilość czasu na wczytanie strony www lub jej komponentów. Ciekawa animacja symulująca pasek ładowania poprawia odbiór strony internetowej i przekazuje informację użytkownikowi, że dany element jest w tej chwili wczytywany.
Przykłady preloaders i inspiracje
Dostępnych jest wiele gotowych rozwiązań, które pozwalają szybko utworzyć preloadery. Można skorzystać z kodu CSS, bibliotek JavaScript lub programów graficznych, aby stworzyć animowany preloader. Najważniejsze, aby był on lekki, dopasowany do stylu strony i nie wydłużał czasu ładowania, a do tego świetnie nadają się preloadery zbudowane za pomocą czystego kodu CSS.
Przykład 1
W poniższym przykładzie przedstawiono preloader wykorzystujący animację animation, wysokości obiektu oraz wysokości jego selektorów :before i :after. Pomiędzy animowanymi elementami dodano opóźnienie animation-delay, symulujące nierównomierną pracę preloadera.
Przykład 2
W poniższym przykładzie preloadera użyto animacji obrotu transform: rotate(angle). Efekt pracy preloadera uzyskano poprzez przysłonięcie obiektu przez obracające się selektory :before oraz :after.
Przykład 3
W ostatnim przykładzie przedstawiono preloader animacji składającej się siatki sześcianu. Do realizacji zadania ponownie użyto animację animation i transformację transform obiektów.
Ciąg dalszy w artykule: Czym jest Loader i dlaczego warto go używać na stronie www?.
