Jak to zrobić — moduł ładujący CSS
Dowiedz się, jak utworzyć preloader za pomocą CSS.
Jak stworzyć ładowarkę
Krok 1) Dodaj kod HTML:
Przykład
<div class="loader"></div>
Krok 2) Dodaj CSS:
Przykład
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Przykład wyjaśniony
Właściwość border
określa rozmiar obramowania i kolor obramowania modułu ładującego. Właściwość border-radius
przekształca moduł ładujący w okrąg.
Niebieska rzecz, która obraca się wewnątrz granicy, jest określona we
border-top
właściwości. Możesz także dołączyć border-bottom
, border-left
i/lub
border-right
jeśli chcesz mieć więcej „spinnerów” (patrz przykład poniżej).
Rozmiar modułu ładującego jest określony za pomocą właściwości width
i height
.
Na koniec dodaliśmy przycisk, animation
który sprawia, że niebieski przedmiot wiruje w nieskończoność z szybkością animacji 2 sekundy.
Uwaga: Powinieneś także dołączyć prefiks -webkit- dla przeglądarek, które nie obsługują właściwości animacji i transformacji. Kliknij na przykład, aby zobaczyć jak.
Dodaj więcej spinnerów
Przykład
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Przykład
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Przykład
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Inny przykład
Przykład jak umieścić loader na środku strony i pokazać "zawartość strony" po zakończeniu ładowania: