Druga część przykładowych rozwiązań CSS3, które symulują pasek ładowania strony internetowej (preloader).

W pierwszym artykule przedstawiono kilka przykładów niestandardowych pasków wczytywania oraz zaprezentowano kilka atutów wynikających z ich korzystania. Do najważniejszych zalet pasków ładowania działających na kodzie programistycznym należą:

  • możliwość łatwego zarządzania wyglądem i działaniem preloadera,
  • możliwość zmiany wyglądu i mechanizmu działania paska w czasie jego pracy (np. po określonych progach procentowych),
  • możliwość dodania ciekawych animacji pomiędzy poszczególnymi stanami obiektu,
  • możliwość dopasowania prędkości i poziomu ładowania paska, do aktualnego stopnia wczytania się poszczególnych mechanizmów na stronie internetowej,
  • możliwość zatrzymania i ponownego uruchomienia paska w dowolnym czasie, bez potrzeby powrotu do jego początkowych wartości,
  • brak potrzeby dołączania dodatkowych, zewnętrznych zasobów do projektu.

Poniżej zaprezentowano kilka ciekawych rozwiązań, które symulują pasek ładowania strony internetowej, wykorzystując najnowszą wersję języka CSS3.

Przykład 4

Do narysowania poniższego paska ładowania wykorzystano kwadrat (div o tej samej wysokości i szerokości), który za pomocą właściwości border-radius zaokrąglono, po czym każdemu z jego boków dodano inny kolor obramowania. Następnie, do tak stworzonego obiektu dodano animację transform: rotate(angle), która cyklicznie obraca obiekt wokół własnej osi.

Przykład 5

Poniższe rozwiązanie jest bardzo podobne do przykładu czwartego. Do narysowania preloadera również wykorzystano zaokrąglony kwadrat, któremu tym razem ustawiono właściwość gradientu tła background: linear-gradient(direction, color-stop1, color-stop2, ...). Następnie, do tak przygotowanego bloku dodano selektory :before:after, które odpowiednio przysłoniły część zaokrąglonego kwadratu, tworząc przedstawiony poniżej preloader.

Przykład 6

Na koniec zaprezentowano troszeczkę odmienny przykład, w którym do animacji wykorzystano cień tworzonego obiektu box-shadow. Zmieniające się wartości cienia, w kolejnych krokach animacji, tworzą przykład nowoczesnego, w pełni edytowalnego paska ładowania strony internetowej.

Ciąg dalszy w artykule: Animacje CSS – jak skutecznie animować obiekty HTML, przykłady preloaderów.