Imparare a creare un preloader con i CSS.
Come creare un Loader
Fase 1) Aggiungere HTML:
Esempio
<div class="loader"></div>Punto 2) Aggiungere CSS:
Esempio
.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); }
} Prova tu stesso " esempio spiegato
Il border proprietà specifica le dimensioni del bordo e il colore del bordo del caricatore. Il border-radius proprietà trasforma il caricatore in un cerchio.
La cosa blu che gira intorno all'interno del bordo è specificato con il border-top proprietà. È inoltre possibile includere border-bottom , border-left e / o border-right se volete più "spinners" (see example below) .
La dimensione del caricatore è specificata con la width e height proprietà.
Finalmente, aggiungiamo un animation che rende la cosa rotazione blu per sempre con una seconda velocità 2 di animazione.
Nota: Si dovrebbe anche includere prefissi -webkit- e -MS- per i browser che non supportano l'animazione e trasformano le proprietà. Clicca sulla esempio per vedere come.
Aggiungere più filatori
Esempio
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
} Prova tu stesso " Esempio
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
} Prova tu stesso " Un altro esempio
Un esempio di come posizionare il caricatore al centro della pagina e spettacolo "page content" quando il caricamento è completo: