Jak utworzyć: CSS ładownik

Naucz się, jak używać CSS do tworzenia preloaderów.

Spróbuj sam

Jak utworzyć ładownik

Krok 1 - Dodaj HTML:

<div class="loader"></div>

Krok 2 - Dodaj CSS:

.loader {
  border: 16px solid #f3f3f3; /* Świetlisty */
  border-top: 16px solid #3498db; /* Niebieski */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Spróbuj sam

Przykład wyjaśnienia:

border opcji określają rozmiar i kolor ramki ładownika.border-radius opcji, aby przekształcić ładownik w kształt okrągły.

Część niebieska obracająca się wewnątrz ramki jest określona przez border-top opcji określają. Jeśli chcesz więcej "obrotów", możesz również zawrzeć border-bottom,border-left i/lub border-right（zobacz poniższy przykład）。

Rozmiar ładownika jest określony przez width i height opcji.

Ostatecznie, dodaliśmy animację, która wiecznie obraca część niebieską z prędkością 2 sekund.

Uwaga:dla tych, które nie obsługują animation i transform przeglądarki, które obsługują -webkit- przedrostek. Kliknij przykład, aby zobaczyć, jak to zrobić.

dodaj więcej obrotów

Przykład

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Spróbuj sam

Przykład

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Spróbuj sam

Przykład

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Spróbuj sam

Inny przykład

Jak umieścić ładowarkę w środku strony i wyświetlić 'Zawartość strony' po zakończeniu ładowania:

Przykład

Spróbuj sam