Prosty preloader CSS3 bez użycia Javascriptu


1 maja 2015 / Michał Kortas


Tworząc aplikacje przeglądarkowe powinniśmy zrobić wszystko, aby użytkownicy korzystający z nich czuli jak największy komfort. Powinno zależeć nam na dobrej optymalizacji skryptów, jak najmniejszej liczbie przeładowań strony oraz prostocie i intuicyjności interfejsu. Nawet jeżeli klient końcowy musi czekać, powinniśmy go o tym informować. Informacja, niezależnie od tego jaka jest, znacznie lepiej wpływa na wewnętrzny spokój aniżeli jej zupełny brak, okraszony białym ekranem przeglądarki obliczającej coś w tle. Z tego więc powodu pokażę Ci jak stworzyć prosty preloader, korzystający tylko i wyłącznie z możliwości CSS3. Do jego działania nie będzie więc potrzebna włączona obsługa Javascriptu, co jest naprawdę (uwierzcie) mile widziane.

Zobacz działanie preloadera na poniższym wideo.

Kod HTML loadera

  1. Utwórz kontener o klasie loader .
  2. Umieść w nim kilka niedużych ikon lub innych elementów (np. <div>). Ja użyłem do tego 6 identycznych sygnetów z loga WEBroad.pl

sygnets-webroad

Kod CSS loadera

Najpierw ostyluj kontener loader . Oczywiście pozostawiam Ci pełną dowolność. Ja akurat chciałem ustawić go w centrum ekranu z efektem cienia wewnętrznego.

Zajmijmy się teraz ikonkami preloadera. Pokażę Ci w jaki sposób wprawić je w ruch, tak aby spadały z góry, zatrzymywały się na chwilę na środku swojej drogi i w końcu chowały się za dolną krawędzią obszaru ograniczonego przez rodzica.

Stwórz nową animację w CSS3 o nazwie loader .

Jeżeli przypiszemy ją do każdej ikonki otrzymamy efekt spadania ale niestety w równej kolejności, co nie wygląda tak efektownie.

Dla urozmaicenia przygotowałem więc różne style dla co czwartego obiektu. Będzie je różnić tylko i wyłącznie opóźnienie wykonywania animacji. Dzięki temu najpierw „ruszy” ikona pierwsza i w ustalonych odstępach pozostałe.

Dostępność

// Akapit został dodany po dyskusji, która zrodziła się w komentarzach. Dziękuję za odzew.

Aby zapewnić dobrą dostępność powyższego rozwiązania, powinniśmy dodać do kontenera .loader  dodatkowe atrybuty:

[role] + [aria-labelledby]

Podsumowanie

Otrzymaliśmy ładny efekt preloadera, który możemy wdrożyć do naszych przyszłych i obecnych projektów. Zachęcam do modyfikacji i podzielenia się nią w komentarzach.

W powyższym przykładzie, dla zmniejszenia ilości kodu nie używałem w tworzeniu animacji przedrostków dla przeglądarek. Pamiętaj, aby je dodać w końcowym projekcie, jeżeli są potrzebne.

Zobacz DEMO


Tagi:


11 odpowiedzi na “Prosty preloader CSS3 bez użycia Javascriptu”

  1. Comandeer pisze:

    Co do przedrostków – warto zastosować Autoprefixer.

    Wielka szkoda, że całkowicie pominąłeś aspekt dostępności, np [aria-label] + [role] dla .loader i puste [alt] dla obrazków.

    • Myślę, że to trochę szukanie dziury w całym. aria i role każdy doda, kto tego będzie potrzebować no i nic nie zaciemnia meritum wpisu. Preloader można wykorzystać nie tylko na stronach, a na przykład w ekranie ładowania aplikacji mobilnej.

      Efekt ciekawy :)

      • Comandeer pisze:

        Owszem, byłoby to szukanie dziury w całym, gdyby istniała jakakolwiek świadomość aspektów dostępności w środowisku. Ale nie istnieje i *NIKT* nie doda do kodu [role] i etykietki, bo… 90% webmasterów nawet nie wie o istnieniu tego typu rzeczy. A nie zapominajmy, że na WEBroad niekoniecznie zaglądają profesjonaliści, a po prostu ludzie szukający ciekawego pluginu na stronę. Oni tym bardziej nie będą się przejmować „jakąś dostępnością”.

        Tak, efekt wizualny ciekawy, ale to… efekt wizualny – nic więcej. Obecnie rozwiązanie to nie posiada nawet warstwy semantycznej (ok, nagłówek jakoś sprawę ratuje – ale co z obrazkami?). Kontekst użycia nic tutaj nie zmienia – webowe aplikacje mobilne, odpalane przez WebView, to wciąż strony, które przecież dla osób niepełnosprawnych są prezentowane właśnie w taki sposób.

        Nie będziemy mieli dostępnej Sieci, jeśli sami o to nie zadbamy. Taka prawda.

      • Mario06 pisze:

        W sumie można by to pogodzić i nie wrzucać takich dodatków do głównych listingów (bo nadmiernie rozpychają proste przykłady), ale dodawać ramkę na końcu z dobrymi praktykami odnośnie dostępności…

      • Comandeer pisze:

        Cóż… na pewno jest to jakieś kompromisowe rozwiązanie. Co prawda nie do końca by mnie zadowalało, ale przynajmniej byłyby o tym jakieś informacje.

        Problem polega na tym, że wg mnie dostępność to podstawa. Pomijam już fakt, że brak [alt] czyni ten HTML po prostu niepoprawny składniowo.

      • Okej, racja. Dodałem puste [alt], bo zupełnie o nich zapomniałem.
        Co do dostępności, dopisałem akapit. Dziękuję.

  2. Dexter Urbański pisze:

    Intryguje mnie, dlaczego wykorzystujesz ?

  3. krzysiek pisze:

    A jak takiego loadera użyć w momencie przechodzenia między podstronami? Chodzi mi o to, żeby pierwsze pojawił się loadare, a po wczytaniu całej strony „w tle” dopiero wczytana stronka.

    • Comandeer pisze:

      Tricky one ;)
      Trzeba najpierw zaimplementować obsługę History API, po czym Ajaksem ciągnąć daną podstronę. Zestawienie żądania = pokazanie loadera, zakończenie żądania = ukrycie loadera

  4. Maciej pisze:

    Preloader? Zawsze myślałem, że preloader pokazuje ilość załadowanych danych, które są pobierane progresowo. A tutaj widzę stworzoną animację (co prawda ciekawą) za pomocą CSS.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *