Caricatori a elemento singolo: i punti

Stiamo esaminando i caricatori di questa serie. Inoltre, stiamo analizzando alcuni modelli di caricamento comuni e spiegando come ricrearli con nient'altro che un singolo div. Finora abbiamo scelto a parte il classico caricatore rotante. Ora, diamo un'occhiata a un altro di cui probabilmente sei ben a conoscenza: i punti.

I caricatori di punti sono ovunque. Sono puliti perché di solito sono costituiti da tre punti che assomigliano a dei puntini di sospensione di testo (...) che danzano intorno.

Il nostro obiettivo qui è creare la stessa cosa da un singolo elemento div. In altre parole, non esiste un div per punto o animazioni individuali per ciascun punto.

L'esempio di caricatore sopra è realizzato con un singolo elemento div, alcune dichiarazioni CSS e nessuno pseudo-elemento. Sto combinando due tecniche utilizzando i CSS background ed mask. E quando avremo finito, vedremo come l'animazione di un gradiente di sfondo aiuta a creare l'illusione che ogni punto cambi colore mentre si muove su e giù in successione.

L'animazione di sfondo

Iniziamo con l'animazione di sfondo:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Spero che questo sembri abbastanza semplice. Quello che abbiamo è a 180px-wide .loader elemento che mostra due gradienti conici con interruzioni di colore netto tra due colori ciascuno: il primo gradiente è rosso e blu lungo la metà superiore del .loadere il secondo gradiente è verde e viola lungo la metà inferiore.

Il modo in cui viene dimensionato lo sfondo del caricatore (200% di larghezza), vediamo solo uno di quei colori alla volta in ciascuna metà. Poi abbiamo questa piccola animazione che sposta la posizione di quei gradienti di sfondo a sinistra, a destra e viceversa nei secoli dei secoli.

Quando si ha a che fare con le proprietà dello sfondo, soprattutto background-position — Mi riferisco sempre al mio Risposta Stack Overflow in cui sto fornendo una spiegazione dettagliata su come funziona tutto questo. Se ti senti a disagio con i trucchi di fondo dei CSS, ti consiglio vivamente di leggere quella risposta per aiutarti con ciò che verrà dopo.

Nell'animazione, nota che il primo livello è Y=0% (posto in alto) mentre X è cambia da 0% a 100%. Per il secondo strato, abbiamo lo stesso for X ma Y=100% (posto in basso).

Perché usare a conic-gradient() invece di linear-gradient()?

Buona domanda! Intuitivamente, dovremmo usare un gradiente lineare per creare gradienti a due colori come questo:

linear-gradient(90deg, red 50%, blue 0)

Ma possiamo anche ottenere lo stesso risultato utilizzando a conic-gradient() - e con meno codice. Riduciamo il codice e impariamo anche un nuovo trucco nel processo!

Far scorrere i colori a sinistra e a destra è un bel modo per far sembrare che stiamo cambiando i colori, ma potrebbe essere meglio se invece cambiassimo istantaneamente i colori: in questo modo, non c'è possibilità che un punto del caricatore lampeggi di due colori contemporaneamente . Per fare ciò, cambiamo il file animationda linear a steps(1)

I punti del caricatore

Se hai seguito il primo articolo di questa serie, scommetto che sai cosa verrà dopo: Maschere CSS! Ciò che rende le maschere così fantastiche è che in un certo senso ce lo permettono “ritagliare” parti di uno sfondo sotto forma di un altro elemento. Quindi, in questo caso, vogliamo creare alcuni punti, mostrare le sfumature dello sfondo attraverso i punti e ritagliare tutte le parti dello sfondo che non fanno parte di un punto.

Useremo radial-gradient() per questo:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

C'è del codice duplicato lì dentro, quindi creiamo una variabile CSS per snellire le cose:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Bene bene. Ma ora abbiamo bisogno di una nuova animazione che aiuti a spostare i punti su e giù tra i gradienti animati.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Sì, ci sono un totale di tre gradienti radiali, tutti con la stessa configurazione e la stessa dimensione: l'animazione aggiornerà la posizione di ciascuno. Si noti che il X la coordinata di ciascun punto è fissa. IL mask-position è definito in modo tale che il primo punto sia a sinistra (0%), il secondo al centro (50%), e il terzo a destra (100%). Aggiorniamo solo il Y coordinare da 0% a 100% per far ballare i punti.

Ecco cosa otteniamo:

Ora, combinalo con la nostra animazione sfumata e la magia inizia ad accadere:

Variazioni del caricatore di punti

La variabile CSS che abbiamo creato nell'ultimo esempio rende molto più semplice lo scambio di nuovi colori e la creazione di più varianti dello stesso caricatore. Ad esempio, diversi colori e dimensioni:

Che ne dici di un altro movimento per i nostri punti?

Qui, tutto quello che ho fatto è stato aggiornare l'animazione per considerare posizioni diverse e otteniamo un altro caricatore con la stessa struttura di codice!

La tecnica di animazione che ho utilizzato per i livelli maschera può essere utilizzata anche con i livelli di sfondo per creare molti caricatori diversi con un unico colore. Ho scritto un articolo dettagliato su questo. Vedrai che dalla stessa struttura di codice possiamo creare diverse varianti semplicemente modificando alcuni valori. Alla fine dell’articolo condivido alcuni esempi.

Perché non un caricatore con un punto?

Questo dovrebbe essere abbastanza facile da capire dato che sto usando la stessa tecnica ma con una logica più semplice:

Ecco un altro esempio di caricatore in cui sto anche animando radial-gradient combinato con Filtri CSS ed mix-blend-mode per creare un effetto blobby:

Se controlli il codice, vedrai che tutto ciò che sto facendo è animare il file background-position, esattamente come abbiamo fatto con il caricatore precedente, ma aggiungendo un pizzico di background-size per far sembrare che il blob diventi più grande man mano che assorbe i punti.

Se vuoi comprendere la magia dietro l'effetto blob, puoi fare riferimento a queste diapositive interattive (Solo Chrome) di Anna Tudor perché tratta l'argomento molto bene!

Ecco un'altra idea per il caricamento dei punti, questa volta utilizzando una tecnica diversa:

Questo contiene solo 10 dichiarazioni CSS e un fotogramma chiave. L'elemento principale e i suoi due pseudo-elementi hanno la stessa configurazione di sfondo con un gradiente radiale. Ognuno crea un punto, per un totale di tre. L'animazione sposta il gradiente dall'alto verso il basso utilizzando ritardi diversi per ciascun punto.

Oh, e prendi nota di come questa demo utilizza CSS Grid. Questo ci consente di sfruttare l'impostazione predefinita della griglia stretch allineamento in modo che entrambi gli pseudo-elementi coprano l'intera area del loro genitore. Non c'è bisogno di dimensionamento! Spingi un po' con translate() e siamo a posto.

Altri esempi!

Giusto per chiarire il punto, voglio lasciarvi con una serie di esempi aggiuntivi che sono in realtà variazioni di ciò che abbiamo visto. Osservando le demo, vedrai che gli approcci che abbiamo trattato qui sono estremamente flessibili e aprono tantissime possibilità di progettazione.

Prossimo…

OK, quindi abbiamo trattato i caricatori di punti in questo articolo e gli spinner nell'ultimo. Nel prossimo articolo di questa serie in quattro parti, rivolgeremo la nostra attenzione a un altro tipo comune di caricatore: i bar. Prenderemo molto di ciò che abbiamo imparato finora e vedremo come estenderlo per creare ancora un altro caricatore di elementi singoli con il minor codice e la massima flessibilità possibile.

---

Caricatori a elemento singolo: i punti 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-dots/