Caricatori a elemento singolo: The Spinner

Creare caricatori solo CSS è uno dei miei compiti preferiti. È sempre soddisfacente guardare quelle infinite animazioni. E, naturalmente, ci sono lotti di tecniche e approcci per realizzarli: non è necessario guarda oltre CodePen per vedere quanti. In questo articolo, però, vedremo come realizzare un caricatore a singolo elemento che scriva meno codice possibile.

Ho ha realizzato una raccolta di oltre 500 caricatori a div singoli e in questa serie in quattro parti condividerò i trucchi che ho usato per crearne molti. Tratteremo un gran numero di esempi, mostrando come piccoli aggiustamenti possano portare a variazioni divertenti e quanto poco codice dobbiamo scrivere per realizzare tutto ciò!

Per questo primo articolo, creeremo uno dei modelli di caricamento più comuni: barre rotanti:

Ecco l'approccio

Un'implementazione banale per questo caricatore consiste nel creare un elemento per ogni barra racchiusa all'interno di un elemento genitore (per nove elementi totali), quindi giocare con opacity ed transform per ottenere l'effetto rotante.

La mia implementazione, tuttavia, richiede un solo elemento:

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

…e 10 dichiarazioni CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Analizziamolo

A prima vista il codice potrebbe sembrare strano ma vedrai che è più semplice di quello che potresti pensare. Il primo passo è definire la dimensione dell'elemento. Nel nostro caso, è a 150px piazza. Possiamo mettere aspect-ratio da utilizzare in modo che l'elemento rimanga quadrato, qualunque cosa accada.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Quando creo caricatori CSS, cerco sempre di avere un valore per controllare la dimensione complessiva. In questo caso, è il width e tutti i calcoli che copriremo faranno riferimento a quel valore. Ciò mi consente di modificare un singolo valore per controllare il caricatore. È sempre importante poter regolare facilmente le dimensioni dei nostri caricatori senza la necessità di modificare molti valori aggiuntivi.

Successivamente, utilizzeremo i gradienti per creare le barre. Questa è la parte più difficile! Usiamo prima gradiente da creare seconda barre come le seguenti:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Il nostro gradiente è definito con un colore e due interruzioni di colore. Il risultato è un colore solido senza sbiadimenti o transizioni. La dimensione è uguale a 34% largo e 8% Alto. È inoltre posizionato al centro (50%). Il trucco sta nell'uso del valore della parola chiave space - questo duplica il gradiente, dandoci due barre totali.

Da la specifica:

L'immagine viene ripetuta tutte le volte che rientra nell'area di posizionamento dello sfondo senza essere ritagliata, quindi le immagini vengono distanziate per riempire l'area. La prima e l'ultima immagine toccano i bordi dell'area.

Sto usando una larghezza pari a 34% il che significa che non possiamo avere più di due barre (3*34% è maggiore 100%) ma con due battute avremo spazi vuoti (100% - 2 * 34% = 32%). Questo spazio è posto al centro tra le due barre. In altre parole, usiamo una larghezza per il gradiente compreso tra 33% ed 50% per assicurarci di avere almeno due barre con un po' di spazio tra loro. Il valore space è ciò che li posiziona correttamente per noi.

Facciamo lo stesso e creiamo un secondo gradiente simile per ottenere altre due barre in alto e in basso, che ci danno a background valore dell'immobile di:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Possiamo ottimizzarlo utilizzando una variabile CSS per evitare ripetizioni:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Quindi, ora abbiamo quattro barre e, grazie alle variabili CSS, possiamo scrivere il valore del colore una volta, il che facilita l'aggiornamento successivo (come abbiamo fatto con la dimensione del caricatore).

Per creare le barre rimanenti, tocchiamo il file .loader elemento e la sua ::before pseudo-elemento per ottenere altre quattro battute per un totale di otto in tutto.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Nota l'uso di display: grid. Questo ci consente di fare affidamento sulle impostazioni predefinite della griglia stretch allineamento per fare in modo che lo pseudo-elemento copra l'intera area del suo genitore; quindi non è necessario specificare una dimensione su di esso: un altro trucco che riduce il codice ed evita di dover gestire molti valori!

Ora ruotiamo lo pseudo-elemento di 45deg per posizionare le barre rimanenti. Passa il mouse sulla seguente demo per vedere il trucco:

Impostazione dell'opacità

Quello che stiamo cercando di fare è creare l'impressione che ci sia una barra che lascia dietro di sé una scia di barre in dissolvenza mentre percorre un percorso circolare. Ciò di cui abbiamo bisogno ora è giocare con la trasparenza delle nostre barre per creare quella traccia, cosa che faremo con i CSS mask combinato con un gradiente conico come segue:

mask: conic-gradient(from 22deg,#0003,#000);

Per vedere meglio il trucco, applichiamolo ad una scatola a colori:

La trasparenza del colore rosso aumenta gradualmente in senso orario. Lo applichiamo al nostro caricatore e abbiamo le barre con opacità diversa:

In realtà, ogni barra sembra sbiadire perché è mascherata da un gradiente e rientra tra due colori semitrasparenti. È appena percettibile quando viene eseguito, quindi è un po' come poter dire che tutte le barre hanno lo stesso colore con un diverso livello di opacità.

La rotazione

Applichiamo un'animazione di rotazione per ottenere il nostro caricatore. Tieni presente che abbiamo bisogno di un'animazione a gradini e non continua, ecco perché la sto utilizzando steps(8). 8 non è altro che il numero delle barre, quindi quel valore può essere modificato a seconda di quante barre sono in uso.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Questo è tutto! Abbiamo il nostro caricatore con un solo elemento e poche righe di CSS. Possiamo facilmente controllarne le dimensioni e il colore regolando un valore.

Dal momento che abbiamo usato solo il ::before pseudo-elemento, possiamo aggiungere altre quattro barre utilizzando ::after per terminare con 12 battute in totale e quasi lo stesso codice:

Aggiorniamo la rotazione dei nostri pseudo-elementi da considerare 30deg ed 60deg invece di 45deg durante l'utilizzo di un'animazione in dodici passaggi, anziché in otto. Ho anche ridotto l'altezza a 5% invece di 8% per rendere le barre un po' più sottili.

Notate anche che abbiamo grid-area: 1/1 sugli pseudoelementi. Ciò ci consente di posizionarli nella stessa area l'uno sull'altro, impilati uno sopra l'altro.

Indovina un po? Possiamo raggiungere lo stesso caricatore utilizzando un'altra implementazione:

Riesci a capire la logica dietro il codice? Ecco un suggerimento: l'opacità non è più gestita con un CSS mask ma all'interno del gradiente e utilizza anche il file opacity proprietà.

Perché non i punti invece?

Possiamo farlo totalmente:

Se controlli il codice, vedrai che ora stiamo lavorando con un gradiente radiale anziché lineare. Per il resto, il concetto è esattamente lo stesso in cui la maschera crea l'impressione di opacità, ma abbiamo realizzato le forme come cerchi invece che come linee.

Di seguito è riportata una figura per illustrare la nuova configurazione del gradiente:

Se utilizzi Safari, tieni presente che la demo potrebbe essere difettosa. Questo perché Safari attualmente non dispone del supporto per at sintassi nei gradienti radiali. Ma possiamo riconfigurare leggermente il gradiente per superare questo problema:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Altri esempi di caricatori

Ecco un'altra idea per un caricatore spinner simile al precedente.

Per questo mi affido solo a background ed mask per creare la forma (non sono necessari pseudo-elementi). Sto anche definendo la configurazione con variabili CSS per poter creare molte variazioni dallo stesso codice: un altro esempio dei poteri delle variabili CSS. Ho scritto un altro articolo su questa tecnica se vuoi maggiori dettagli.

Tieni presente che alcuni browser si basano ancora su a -webkit- prefisso per mask-composite con il proprio set di valori e non visualizzerà lo spinner nella demo. Ecco un modo per farlo senza mast-composite per ulteriore supporto del browser.

Ne ho un altro per te:

Per questo, sto usando a background-color per controllare il colore e utilizzare mask ed mask-composite per creare la forma finale:

Prima di concludere, ecco alcuni altri caricatori rotanti che ho realizzato qualche tempo fa. Mi affido a tecniche diverse ma utilizzo comunque gradienti, maschere, pseudo-elementi, ecc. Potrebbe essere un buon esercizio per capire la logica di ognuna e imparare nuovi trucchi allo stesso tempo. Detto questo, se hai qualche domanda al riguardo, la sezione commenti è in basso.

Concludendo

Vedi, c'è così tanto che possiamo fare nei CSS con nient'altro che un singolo div, un paio di gradienti, pseudo-elementi e variabili. Sembra che abbiamo creato un sacco di diversi caricatori rotanti, ma sono fondamentalmente tutti la stessa cosa con lievi modifiche.

Questo è solo l'inizio. In questa serie esamineremo più idee e concetti avanzati per la creazione di caricatori CSS.

---

Caricatori a elemento singolo: The Spinner originariamente pubblicato il CSS-Tricks. Dovresti ricevi la newsletter.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://css-tricks.com/single-element-loaders-the-spinner/