Caricatori a elemento singolo: il 3D!

Per questo quarto ed ultimo articolo del ns piccole serie su caricatori monoelemento, esploreremo i modelli 3D. Quando si crea un elemento 3D, è difficile immaginare che un solo elemento HTML sia sufficiente per simulare qualcosa come tutte e sei le facce di un cubo. Ma forse possiamo farla franca con qualcosa di più cubo-piace invece mostrando solo i tre lati anteriori della forma - è totalmente possibile ed è quello che faremo insieme.

Il caricatore a cubo diviso

Ecco un caricatore 3D in cui un cubo è diviso in due parti, ma è realizzato con un solo elemento:

Ogni metà del cubo è realizzata utilizzando uno pseudo-elemento:

Bello, vero?! Possiamo usare un gradiente conico con CSS clip-path sull'elemento ::before ed ::after pseudos per simulare le tre facce visibili di un cubo 3D. Il margine negativo è ciò che unisce i due pseudo per sovrapporsi e simulare un cubo intero. Il resto del nostro lavoro consiste principalmente nell'animazione di queste due metà per ottenere caricatori dall'aspetto ordinato!

Diamo un'occhiata a un'immagine che spiega la matematica dietro i punti del percorso di clip utilizzati per creare questo elemento simile a un cubo:

Abbiamo le nostre variabili e un'equazione, quindi mettiamole in funzione. Per prima cosa, stabiliamo le nostre variabili e imposteremo il dimensionamento per il main .loader elemento:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Niente di troppo folle finora. Noi abbiamo un 150px quadrato che si configura come un contenitore flessibile. Ora stabiliamo i nostri pseudo:

.loader::before,
.loader::after { content: ""; flex: 1;
}

Quelle sono due metà del .loader contenitore. Abbiamo bisogno di dipingerli, quindi è lì che il nostro gradiente conico butta dentro:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

Il gradiente c'è, ma sembra strano. Abbiamo bisogno di aggancialo all'elemento:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Assicuriamoci che le due metà si sovrappongano con a margine negativo:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Ora facciamoli muovere!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Ecco ancora una volta la demo finale:

Il caricatore di cubi di avanzamento

Usiamo la stessa tecnica per creare un caricatore di avanzamento 3D. Sì, ancora un solo elemento!

Non stiamo cambiando nulla per quanto riguarda la simulazione del cubo nello stesso modo in cui abbiamo fatto prima, a parte l'altezza e le proporzioni del caricatore. L'animazione che stiamo realizzando si basa su una tecnica sorprendentemente semplice in cui aggiorniamo la larghezza del lato sinistro mentre il lato destro riempie lo spazio rimanente, grazie a flex-grow: 1.

Il primo passo è aggiungere un po' di trasparenza sul lato destro usando opacity:

Questo simula l'effetto che un lato del cubo viene riempito mentre l'altro è vuoto. Quindi aggiorniamo il colore del lato sinistro. Per fare ciò, aggiorniamo i tre colori all'interno del gradiente conico o lo facciamo aggiungendo un colore di sfondo con a background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

Questo trucco ci consente di aggiornare il colore solo una volta. Il lato destro del caricatore si fonde con le tre sfumature di bianco del gradiente conico per creare tre nuove sfumature del nostro colore, anche se stiamo utilizzando un solo valore di colore. Imbroglio del colore!

Animiamo la larghezza del lato sinistro del caricatore:

Ops, l'animazione è un po' strana all'inizio! Hai notato come in qualche modo inizia al di fuori del cubo? Questo perché stiamo iniziando l'animazione al 0% larghezza. Ma a causa del clip-path e margine negativo che stiamo utilizzando, quello che dobbiamo fare invece è partire dal nostro --_d variabile, che abbiamo usato per definire il clip-path punti e il margine negativo:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

È un po' meglio:

Ma possiamo rendere questa animazione ancora più fluida. Hai notato che ci sfugge qualcosa? Lascia che ti mostri uno screenshot per confrontare come dovrebbe essere la demo finale con l'ultima demo:

È la faccia inferiore del cubo! Poiché il secondo elemento è trasparente, dobbiamo vedere la faccia inferiore di quel rettangolo come puoi vedere nell'esempio a sinistra. È sottile, ma dovrebbe esserci!

Possiamo aggiungere un gradiente all'elemento principale e ritagliarlo come abbiamo fatto con gli pseudo:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Ecco il codice completo una volta che tutto è stato messo insieme:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

Questo è tutto! Abbiamo appena usato una tecnica intelligente che utilizza pseudo-elementi, gradienti conici, ritaglio, fusione dello sfondo e margini negativi per ottenere, non uno, ma seconda caricatori 3D dall'aspetto dolce con nient'altro che un singolo elemento nel markup.

Più 3D

Possiamo ancora andare oltre e simulare un numero infinito di cubi 3D usando un elemento: sì, è possibile! Ecco una griglia di cubi:

Questa demo e le seguenti demo non sono supportate in Safari al momento della scrittura.

Pazzo, vero? Ora stiamo creando uno schema ripetuto di cubi realizzati utilizzando un singolo elemento... e nemmeno pseudos! Non entrerò nei minimi dettagli sulla matematica che stiamo usando (ci sono numeri molto specifici lì dentro) ma ecco una figura per visualizzare come siamo arrivati ​​qui:

Per prima cosa utilizziamo a conic-gradient per creare il motivo a cubo ripetuto. La ripetizione del pattern è controllata da tre variabili:

• --size: Fedele al suo nome, controlla la dimensione di ogni cubo.
• --m: Rappresenta il numero di colonne.
• --n: Questo è il numero di righe.
• --gap: questa è la distanza o distanza tra i cubi

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Quindi applichiamo un livello di maschera utilizzando un altro motivo con le stesse dimensioni. Questa è la parte più complicata di questa idea. Utilizzando una combinazione di a linear-gradient e conic-gradient taglieremo alcune parti del nostro elemento per mantenere visibili solo le forme del cubo.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

Il codice può sembrare un po' complesso ma grazie alle variabili CSS tutto ciò che dobbiamo fare è aggiornare alcuni valori per controllare la nostra matrice di cubi. Hai bisogno di una griglia 10⨉10? Aggiorna il --m ed --n variabili a 10. Hai bisogno di un divario più ampio tra i cubi? Aggiorna il --gap valore. I valori dei colori vengono utilizzati solo una volta, quindi aggiornali per una nuova tavolozza di colori!

Ora che abbiamo un'altra tecnica 3D, usiamola per creare variazioni del caricatore giocando con diverse animazioni. Ad esempio, che ne dici di uno schema ripetuto di cubi che scorrono all'infinito da sinistra a destra?

Questo caricatore definisce quattro cubi in una singola riga. Ciò significa il nostro --n valore è 4 ed --m è uguale a 1 . In altre parole, non abbiamo più bisogno di questi!

Invece, possiamo lavorare con il --size ed --gap variabili in un contenitore della griglia:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

Questo è il nostro contenitore. Abbiamo quattro cubi, ma vogliamo mostrarne solo tre alla volta nel contenitore in modo da averne sempre uno che scivola dentro mentre uno sta scivolando fuori. Ecco perché stiamo calcolando la larghezza per 3 e avere le proporzioni impostate su 3 come pure.

Assicuriamoci che il nostro modello di cubo sia impostato per la larghezza di quattro cubi. Lo faremo sui container ::before pseudo-elemento:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Ora che abbiamo quattro cubi in un contenitore a tre cubi, possiamo giustificare lo schema del cubo all'estremità del contenitore della griglia per traboccarlo, mostrando gli ultimi tre cubi:

.loader { /* same as before */ justify-content: end;
}

Ecco cosa abbiamo finora, con un contorno rosso per mostrare i limiti del contenitore della griglia:

Ora tutto ciò che dobbiamo fare è spostare lo pseudo-elemento a destra aggiungendo la nostra animazione:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Hai capito il trucco dell'animazione? Concludiamo nascondendo il motivo del cubo traboccante e aggiungendo un tocco di mascheratura per creare quell'effetto di dissolvenza che l'inizio e la fine:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Possiamo renderlo molto più flessibile introducendo una variabile, --n, per impostare quanti cubi vengono visualizzati nel contenitore contemporaneamente. E poiché il numero totale di cubi nel modello dovrebbe essere uno in più --n, possiamo esprimerlo come calc(var(--n) + 1).

Ecco la cosa completa:

OK, un altro caricatore 3D simile ma ha i cubi che cambiano colore in successione invece di scorrere:

Faremo affidamento su uno sfondo animato con background-blend-mode per questo:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

Ho rimosso il codice superfluo utilizzato per creare lo stesso layout dell'ultimo esempio, ma con tre cubi anziché quattro. Quello che sto aggiungendo qui è un gradiente definito con un colore specifico che si fonde con il gradiente conico, proprio come abbiamo fatto in precedenza per il caricatore 3D della barra di avanzamento.

Da lì, sta animando il gradiente di sfondo background-position come un'animazione in tre fasi per far lampeggiare i cubi con i colori uno alla volta.

Se non hai familiarità con i valori per cui sto usando background-position e la sintassi di sfondo, lo consiglio vivamente uno dei miei precedenti articoli e uno dei le mie risposte Stack Overflow. Lì troverai una spiegazione molto dettagliata.

Possiamo aggiornare il numero di cubi per renderlo variabile?

Sì, ho un soluzione per questo, ma vorrei che ci provassi piuttosto che incorporarlo qui. Prendi ciò che abbiamo imparato dall'esempio precedente e prova a fare lo stesso con questo, quindi condividi il tuo lavoro nei commenti!

Variazioni in abbondanza!

Come gli altri tre articoli di questa serie, vorrei lasciarti con qualche ispirazione per andare avanti e creare i tuoi caricatori. Ecco una raccolta che include i caricatori 3D che abbiamo realizzato insieme, più alcuni altri per stimolare la tua immaginazione:

Questo è un involucro

Spero davvero che nelle ultime settimane ti sia piaciuto passare del tempo a creare caricatori a elemento singolo con me. È pazzesco che abbiamo iniziato con uno spinner apparentemente semplice e poi abbiamo aggiunto gradualmente nuovi pezzi per lavorare da soli fino alle tecniche 3D che utilizzano ancora solo un singolo elemento nel markup. Questo è esattamente come appare il CSS quando ne sfruttiamo i poteri: scalabile, flessibile e riutilizzabile.

Grazie ancora per aver letto questa piccola serie! Firmerò ricordandoti che ho a raccolta di oltre 500 caricatori se stai cercando più idee e ispirazione.

---

Caricatori a elemento singolo: il 3D! 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-going-3d/