Dowiedz się, jak stworzyć preloader z CSS.
Jak stworzyć Loader
Krok 1) Dodaj 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); }
} Spróbuj sam " Przykład Poradnik
border właściwość określa wielkość oraz kolor obramowania ładowacza. border-radius nieruchomość przekształca ładowarkę do okręgu.
Niebieska rzeczą, która obraca się wewnątrz granicy jest określona z border-top nieruchomości. Można także border-bottom , border-left i / lub border-right jeśli chcesz więcej "spinners" (see example below) .
Wielkość ładującego jest określona przez width i height właściwości.
W końcu możemy dodać animation , która sprawia niebieską rzeczą zawrót zawsze z 2 drugiej prędkości animacji.
Uwaga: Należy także -webkit- i -ms- prefiksy dla przeglądarek, które nie obsługują animacji i przekształcenia właściwości. Kliknij na przykład zobaczyć, jak.
Dodaj więcej błystki
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
Przykładem jak to ładowarka w środku strony i pokazać "page content" po zakończeniu ładowania: