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
i :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.