Generatore di spinner CSS semplice

Perché questo spinner è semplice

Molti loader usano più elementi annidati, immagini di sfondo o uno script. Questo è un singolo div stilizzato come un cerchio. L’anello è formato da un bordo, e solo la parte superiore del bordo ha un colore diverso. Ruotando il cerchio, quella parte colorata percorre il contorno. L’intera tecnica si basa su quattro idee:

1. Una scatola quadrata con larghezza e altezza uguali.
2. border-radius: 50% per trasformare la scatola in un cerchio.
3. Un bordo grigio con un solo lato colorato, tramite border-top-color.
4. Un’animazione di rotazione che non si ferma mai.

Il codice completo

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

Questo è l’intero loader. Non c’è niente da scaricare né una dipendenza da tenere aggiornata.

Centrarlo

L’anello è un normale elemento di blocco. Per centrarlo nella pagina o in un contenitore, aggiungi margin: 0 auto; a .loader per il centramento orizzontale, oppure rendi flex il genitore:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Cosa non fa questo strumento

• Crea solo lo stile dell’anello. File di punti, barre e loader pulsanti sono design diversi.
• Il colore della traccia è un grigio chiaro fisso; modificalo nel CSS incollato se il tuo sfondo è scuro.
• Non aggiunge attributi di accessibilità al tuo markup. Aggiungi tu role="status" e un aria-label all’elemento.

Piccole modifiche dopo la copia

Poiché lo spinner è composto da poche proprietà, modificarlo è semplice. Per rendere l’anello più leggero, riduci lo spessore del bordo. Per renderlo più calmo, aumenta il tempo dell’animazione. Per usare lo stesso loader in due dimensioni, copia la classe una volta e sovrascrivi solo width, height e border-width in una seconda classe. Mantenere il codice così breve è il vantaggio principale di uno spinner semplice: lo leggi tutto con uno sguardo e puoi cambiare qualsiasi valore senza cercarlo in una libreria.

Puoi anche tingere la traccia sostituendo #eee con un colore adatto alla tua pagina, mentre l’arco in movimento mantiene il colore scelto nel generatore.