Podczas tworzenia stron internetowych, programistom często zdarza się potrzeba zaimplementowania mechanizmu paska ładowania strony internetowej – tak zwanych preloaderów. Decydując się na skorzystanie z animowanego obrazka, użytkownik traci możliwość kontroli nad szybkością, rodzajem i sposobem animacji. Animowany obrazek posiada stałe, niezmienne parametry, które nie są możliwe do edycji lub implementacja odpowiedniego algorytmu jest nieopłacalna. Na szczęście, wraz z rozwojem języka kaskadowych arkuszy stylów (ang. Cascading Style Sheets, CSS), programiści zyskali nowe możliwości animacji zwykłych znaczników kodu HTML.
Poniżej zaprezentowano kilka ciekawych rozwiązań, które symulują pasek wczytywania strony internetowej (preloader) wykorzystując najnowszą wersję języka CSS3.
Przykład 1
W poniższym przykładzie zaprezentowano wzór nowoczesnego symulatora ładowania strony internetowej wykorzystującego animację animation, wysokości obiektu oraz wysokości jego selektorów :before i :after. Pomiędzy zmianą wysokości obiektu i jego selektorów dodano opóźnienia animation-delay, symulujące nierównomierną pracę preloadera.
Przykład 2
W poniższym przykładzie zmieniono animację wysokości obiektu, na animację obrotu jego selektorów transform: rotate(angle). Obiekt zaokrąglono border-radius, a efekt zmniejszania się preloadera uzyskano poprzez przysłonięcie obiektu przez jego ciągle obracające się selektory :before oraz :after. Selektory obiektu zsynchronizowano ze sobą z odpowiednim opóźnieniem animation-delay. Kolor tła selektorów background-color ustawiono na wartość koloru tła strony, aby preloader wydawał się jednym, spójnym obiektem.
Przykład 3
W ostatnim przykładzie zaprezentowano całą potęgę języka CSS3 w postaci animacji składającej się siatki sześcianu. Do realizacji zadania wykorzystano poznaną z wcześniejszych przykładów funkcję animation. Tym razem nie istnieje jeden spójny obiekt, ale animacja składa się z kilku obiektów, odpowiednio ustawionych względem siebie. Kolejne, zdefiniowane kroki animacji, decydują o kolejności przesuwania i obrotu obiektów.
Kod animacji, pomimo że jest znacznie bardziej złożony niż poprzednie przykłady, realizuje animację za pomocą podobnych, poznanych wyżej funkcji.
Ciąg dalszy w artykule: CSS3 Preloaders – niestandardowy pasek ładowania imitujący wczytywanie strony internetowej.
