Come creare: Caricaleditore CSS

Impara come creare il precaricatore utilizzando CSS.

Prova da solo

Come creare il caricaleditore

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

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

Prova da solo

Esempio di spiegazione:

border attributo specifica la dimensione e il colore dei bordi del caricaleditore.border-radius che trasforma il caricaleditore in un cerchio.

La parte blu che ruota all'interno dei bordi è specificata dall'attributo border-top attributi specificano. Se desideri più "rotatori", puoi anche includere border-bottom,border-left e/ou border-right（vedi l'esempio sottostante）。

La dimensione del caricaleditore è determinata da width e height attributo specificato.

Infine, abbiamo aggiunto un'animazione che fa ruotare per sempre la parte blu a una velocità di 2 secondi.

Attenzione:per quelli che non supportano animation e transform browser che supporta l'attributo -webkit- prefisso. Clicca sull'esempio per vedere come fare.

aggiungi più rotatori

Esempio

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

Prova da solo

Esempio

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

Prova da solo

Esempio

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

Prova da solo

Un altro esempio

Come posizionare il carico in mezzo alla pagina e visualizzare "Contenuto della pagina" quando il caricamento è completato:

Esempio

Prova da solo