Caricatori a elemento singolo: le barre

Abbiamo esaminato gli spinner. Abbiamo esaminato i punti. Ora affronteremo un altro modello comune per i caricatori: bar. E in questo terzo articolo della serie faremo la stessa cosa che abbiamo fatto con gli altri, realizzandolo con un solo elemento e con CSS flessibili che facilitano la creazione di variazioni.

Cominciamo con non uno, non due, ma 20 esempi di caricatori di barre.

Che cosa?! Descriverai dettagliatamente ciascuno di essi? È troppo per un articolo!

Potrebbe sembrare così a prima vista! Ma tutti si basano sulla stessa struttura del codice e aggiorniamo solo pochi valori per creare variazioni. Questa è tutta la potenza dei CSS. Non impariamo come creare un caricatore, ma impariamo diverse tecniche che ci consentono di creare tutti i caricatori che desideriamo utilizzando semplicemente la stessa struttura di codice.

Facciamo delle barrette!

Iniziamo definendo le dimensioni da utilizzare width (o height) Con aspect-ratio per mantenere la proporzione:

.bars { width: 45px; aspect-ratio: 1;
}

In un certo senso "fintiamo" tre barre con un gradiente lineare sullo sfondo, molto simile a come abbiamo creato i caricatori di punti nella parte 2 di questa serie.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Il codice sopra ci darà il seguente risultato:

Come gli altri articoli di questa serie, ne tratteremo molti background inganno. Quindi, se mai ti sembra che stiamo saltando troppo velocemente o ritieni di aver bisogno di qualche dettaglio in più, per favore dai un'occhiata a quelli. Puoi anche leggere il mio Risposta Stack Overflow dove do una spiegazione dettagliata su come funziona tutto questo.

Animare i bar

Animiamo la dimensione o la posizione dell'elemento per creare il caricatore di barre. Animiamo le dimensioni definendo i seguenti fotogrammi chiave di animazione:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Vedi cosa sta succedendo lì? Tra 0% e 100%, l'animazione cambia il background-size del gradiente di sfondo dell'elemento. Ogni fotogramma chiave imposta tre dimensioni di sfondo (una per ogni gradiente).

Ed ecco cosa otteniamo:

Riesci a immaginare tutte le possibili variazioni che possiamo ottenere giocando con diverse configurazioni di animazione per le dimensioni o le posizioni?

Fissiamo la dimensione su 20% 50% e aggiorna le posizioni questa volta:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…che ci procura un altro caricatore!

Probabilmente ormai hai capito il trucco. Tutto ciò di cui hai bisogno è definire una sequenza temporale che traduci in un fotogramma chiave. Animando le dimensioni, la posizione o entrambe! — c'è un numero infinito di possibilità di caricamento a portata di mano.

E una volta che ci sentiamo a nostro agio con questa tecnica possiamo andare oltre e utilizzare un gradiente più complesso per creare un effetto uniforme Scopri di più caricatori.

Ad eccezione degli ultimi due esempi in quella demo, tutti i caricatori di barre utilizzano lo stesso markup e gli stessi stili sottostanti e diverse combinazioni di animazioni. Apri il codice e prova a visualizzare ogni fotogramma in modo indipendente; vedrai quanto sia relativamente banale realizzarne dozzine - se non centinaia - di variazioni.

Diventare fantasioso

Ti ricordi il trucco con la maschera che abbiamo fatto con i caricatori di punti? il secondo articolo di questa serie? Possiamo fare lo stesso qui!

Se applichiamo tutta la logica di cui sopra all'interno del file mask proprietà possiamo utilizzare qualsiasi configurazione di sfondo per aggiungere una colorazione fantasia ai nostri caricatori.

Prendiamo una demo e aggiorniamola:

Tutto quello che ho fatto è stato aggiornare tutto il file background-* con mask-* e ho aggiunto una colorazione sfumata. Così semplice e tuttavia otteniamo un altro fantastico caricatore.

Quindi non c'è differenza tra i punti e le barre?

Nessuna differenza! Ho scritto due articoli diversi per coprire il maggior numero di esempi possibile, ma in entrambi mi affido alle stesse tecniche:

1. Sfumature per creare le forme (punti o barre o magari qualcos'altro)
2. Animazione background-size e / o background-position per creare l'animazione del caricatore
3. Aggiunta di maschera per aggiungere un tocco di colore

Arrotondare le sbarre

Proviamo qualcosa di diverso questa volta in cui possiamo arrotondare i bordi delle nostre barre.

Utilizzando un elemento e il suo ::before ed ::after pseudos, definiamo tre barre identiche:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Questo ci dà tre barre, questa volta senza fare affidamento su un gradiente lineare:

Ora il trucco è riempire quelle barre con una bella sfumatura. Per simulare un gradiente continuo, dobbiamo giocare con background proprietà. Nella figura sopra, l'area verde definisce l'area coperta dal caricatore. Quell'area dovrebbe avere la dimensione del gradiente e, se facciamo i conti, equivale a moltiplicare entrambi i lati etichettati S nel diagramma, o background-size: var(--s) var(--s).

Poiché i nostri elementi sono posizionati individualmente, dobbiamo aggiornare la posizione del gradiente all'interno di ciascuno di essi per assicurarci che tutti si sovrappongano. In questo modo, stiamo simulando un gradiente continuo anche se in realtà sono tre.

Per l'elemento principale (posizionato al centro), lo sfondo deve essere al centro. Usiamo quanto segue:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Per lo pseudo-elemento a sinistra, abbiamo bisogno dello sfondo a sinistra

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

E per lo pseudo a destra, lo sfondo deve essere posizionato a destra:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Utilizzando la stessa variabile CSS, --_i, che abbiamo utilizzato per la traduzione, possiamo scrivere il codice in questo modo:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Ora tutto ciò che dobbiamo fare è animare l'altezza e aggiungere alcuni ritardi! Ecco tre esempi in cui tutto ciò che è diverso sono i colori e le dimensioni:

Concludendo

Spero che finora ti senti super incoraggiato da tutti i poteri che hai per realizzare animazioni di caricamento dall'aspetto complesso. Tutto ciò di cui abbiamo bisogno è un elemento, gradienti o pseudonimi per disegnare le barre, quindi alcuni fotogrammi chiave per spostare le cose. Questa è la ricetta completa per ottenere un numero infinito di possibilità, quindi esci e inizia a cucinare qualcosa di carino!

Fino al prossimo articolo, vi lascio con una divertente raccolta di caricatori in cui sto combinando i punti ed i bar!

---

Caricatori a elemento singolo: le barre 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-bars/