Come fare per - Caricatore CSS
Scopri come creare un preloader con CSS.
Come creare un caricatore
Passaggio 1) Aggiungi HTML:
Esempio
<div class="loader"></div>
Passaggio 2) Aggiungi 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); }
}
Esempio spiegato
La border
proprietà specifica la dimensione del bordo e il colore del bordo del caricatore. La border-radius
proprietà trasforma il caricatore in un cerchio.
La cosa blu che ruota all'interno del bordo è specificata con la
border-top
proprietà. Puoi anche includere border-bottom
, border-left
e/o
border-right
se vuoi più "spinner" (vedi esempio sotto).
La dimensione del caricatore è specificata con le proprietà width
e height
.
Alla fine, aggiungiamo un animation
che fa girare per sempre la cosa blu con una velocità di animazione di 2 secondi.
Nota: dovresti anche includere un prefisso -webkit- per i browser che non supportano l'animazione e le proprietà di trasformazione. Fare clic sull'esempio per vedere come.
Aggiungi più spinner
Esempio
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Esempio
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Esempio
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Un altro esempio
Un esempio di come posizionare il caricatore al centro della pagina e mostrare il "contenuto della pagina" al termine del caricamento: