LocalToolsRaccolta di strumenti browser offline

Categoria: Sviluppo

Generatore di spinner di caricamento CSS

Idea internaManca uno strumento?

Progetta indicatori di caricamento CSS leggeri in locale e copia il codice

Crea spinner di caricamento solo CSS con anteprima dal vivo. Regola dimensione, colore, spessore e velocità, poi copia i frammenti HTML e CSS. Senza JavaScript né immagini.

Anteprima

HTML
<span class="loader" role="status" aria-label="Caricamento…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Ogni frammento anima solo transform e opacity e termina con un blocco prefers-reduced-motion, così l'animazione si ferma per chi ha chiesto al proprio sistema di ridurre il movimento.

Niente JavaScript, niente immagini, niente web font, e niente esce dal tuo browser.

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Un indicatore di caricamento è uno dei pochi casi in cui poche righe di CSS battono nettamente una libreria: nessuno script da caricare, nessuna immagine da richiedere, niente da inizializzare prima di ciò che stai aspettando. Questi cinque modelli — anello, doppio anello, punti, barre e pulsazione — animano solo `transform` e `opacity`, così il browser può eseguirli sul compositore invece di ricalcolare il layout a ogni fotogramma. Ogni frammento termina con un blocco `prefers-reduced-motion`, perché uno spinner è decorazione e chi ha chiesto al sistema di smettere di muovere le cose non dovrebbe stare a guardarlo. Il markup è uno `<span role="status">` con etichetta, così uno screen reader annuncia l'attesa invece di trovare una casella vuota.

Come si usa

  1. Scegli un modello, poi regola dimensione, spessore, velocità e colori.
  2. Rinomina la classe se rischia di entrare in conflitto con il tuo foglio di stile.
  3. Copia HTML e CSS nel tuo progetto.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Gli spinner sono solo CSS?
Sì. Ognuno è uno span (con qualche span figlio vuoto per i modelli a punti e a barre) più un'animazione CSS. Niente JavaScript, niente SVG, niente immagini, niente web font.
Serve JavaScript per farli funzionare?
No. L'animazione parte appena l'elemento è nel documento. Ti serve del codice solo per decidere quando mostrarlo e nasconderlo.
Posso cambiare velocità e colore?
Sì: dimensione, spessore del tratto, durata dell'animazione, colore principale e colore del binario sono tutti controlli di questa pagina e finiscono direttamente nel frammento che copi.
E chi preferisce meno movimento?
Ogni frammento generato termina con una media query prefers-reduced-motion che di fatto ferma l'animazione: l'indicatore compare comunque, ma non gira per chi ha ridotto il movimento a livello di sistema.
Il codice viene generato in locale?
Sì. Le impostazioni, l'anteprima e i frammenti generati restano nel tuo browser; non viene caricato nulla.

Torna a tutti gli strumenti