Prowadzenie projektów i realizacja serwisów internetowych

CSS3 Preloaders – niestandardowy pasek ładowania imitujący wczytywanie strony internetowej

Pasek ładowania CSS3

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

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

← Poprzedni artykuł

Następny artykuł →

Komentarze: 1

  1. Konrad

    Konrad

    10 lutego 2021 o 20:30

    Pierwsze dwa rozumiem, ale ten trzeci jest dla mnie za bardzo skomplikowany. Szacun

    Odpowiedz

Komentuj

Twój adres email nie zostanie opublikowany. Służyć będzie tylko i wyłącznie w celu udzielenia odpowiedzi na zadane pytanie lub komentarz. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *.