Nakladalniki enega elementa: palice

Ogledali smo si vrtavke. Ogledali smo si pike. Zdaj se bomo lotili še enega pogostega vzorca za nakladalce: bari. In v tem tretjem članku iz serije bomo naredili isto stvar kot v drugih, tako da ga bomo naredili samo z enim elementom in s prilagodljivim CSS-jem, ki olajša ustvarjanje različic.

Začnimo ne z enim, ne z dvema, ampak z 20 primeri paličnih nakladalnikov.

Kaj?! Ali boste podrobno opisali vsakega od njih? To je preveč za članek!

Morda se na prvi pogled zdi tako! Vendar se vsi zanašajo na isto strukturo kode in posodobimo le nekaj vrednosti, da ustvarimo različice. To je vsa moč CSS. Ne naučimo se, kako ustvariti enega nalagalnika, ampak se naučimo različnih tehnik, ki nam omogočajo, da ustvarimo toliko nalagalnika, kot ga želimo, z uporabo zgolj iste strukture kode.

Naredimo nekaj barov!

Začnemo z določitvijo dimenzij za njihovo uporabo width (ali height) Z aspect-ratio ohraniti razmerje:

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

Nekako »ponaredimo« tri palice z linearnim gradientom na ozadju – zelo podobno, kot smo ustvarili nalagalnike pik v 2. delu te serije.

.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% */
}

Zgornja koda nam bo dala naslednji rezultat:

Tako kot drugi članki v tej seriji se bomo tudi mi ukvarjali z veliko background zvijača. Torej, če se vam kdaj zdi, da skačemo prehitro ali menite, da potrebujete malo več podrobnosti, jih prosim preverite. Preberete lahko tudi moje Stack Overflow odgovor, kjer dam podrobno razlago o tem, kako vse to deluje.

Animiranje palic

Bodisi animiramo velikost ali položaj elementa, da ustvarimo nalagalnik palic. Animirajmo velikost tako, da definiramo naslednje ključne sličice animacije:

@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 */
}

Vidite, kaj se tam dogaja? Med 0 % in 100 % animacija spremeni background-size preliva ozadja elementa. Vsak ključni okvir nastavi tri velikosti ozadja (eno za vsak preliv).

In tole dobimo:

Si lahko začnete predstavljati vse možne različice, ki jih lahko dobimo z igranjem z različnimi konfiguracijami animacije za velikosti ali položaje?

Popravimo velikost na 20% 50% in tokrat posodobi položaje:

.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 */
}

... kar nam prinese še enega nakladalca!

Verjetno ste že razumeli trik. Vse kar potrebujete je, da določite časovnico, ki jo prevedete v ključni okvir. Z animiranjem velikosti, položaja — ali obojega! — na dosegu roke imamo neskončno število možnosti nakladanja.

In ko se bomo s takšno tehniko naučili, lahko gremo dlje in uporabimo bolj zapleten gradient za ustvarjanje enakomernega več nakladalci.

Pričakujte zadnja dva primera v tej predstavitvi, vsi nalagalniki palic uporabljajo iste osnovne oznake in sloge ter različne kombinacije animacij. Odprite kodo in poskusite vizualizirati vsak okvir posebej; videli boste, kako razmeroma nepomembno je ustvarjanje desetin — če ne na stotine — variacij.

Postaja fajn

Ste se spomnili trika z masko, ki smo ga izvajali z nalagalniki točk drugi članek te serije? Enako lahko storimo tudi tukaj!

Če uporabimo vso zgornjo logiko znotraj mask Lastnost lahko uporabimo katero koli konfiguracijo ozadja, da našim nalagalnikom dodamo modno barvo.

Vzemimo en demo in ga posodobimo:

Vse, kar sem naredil, je posodobitev vseh background-* z mask-* in dodal sem gradientno barvanje. Tako preprosto, a vseeno dobimo še en kul nakladalnik.

Torej ni razlike med pikami in črtami?

Brez razlike! Napisal sem dva različna članka, da bi zajel čim več primerov, vendar se v obeh zanašam na iste tehnike:

1. Gradienti za ustvarjanje oblik (pike ali palice ali morda kaj drugega)
2. Animiranje background-size in / ali background-position za ustvarjanje animacije nalagalnika
3. Dodajanje maske za pridih barv

Zaokroževanje palic

Tokrat poskusimo nekaj drugačnega, kjer lahko zaokrožimo robove naših palic.

Uporaba enega elementa in njegovega ::before in ::after pseudos, definiramo tri enake palice:

.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; }

To nam daje tri vrstice, tokrat brez zanašanja na linearni gradient:

Zdaj je trik v tem, da te palice zapolnite s čudovitim gradientom. Za simulacijo neprekinjenega gradienta se moramo poigrati background lastnosti. Na zgornji sliki zeleno območje določa območje, ki ga pokriva nakladalnik. To območje mora biti velikosti gradienta in če izračunamo, je enako množenju obeh označenih strani S v diagramu, oz background-size: var(--s) var(--s).

Ker so naši elementi postavljeni posamično, moramo posodobiti položaj gradienta znotraj vsakega, da zagotovimo, da se vsi prekrivajo. Na ta način simuliramo en neprekinjen gradient, čeprav so v resnici trije.

Za glavni element (postavljen na sredino) mora biti ozadje na sredini. Uporabljamo naslednje:

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

Za psevdoelement na levi potrebujemo ozadje na levi

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

In za psevdo na desni mora biti ozadje postavljeno na desno:

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

Z uporabo iste spremenljivke CSS, --_i, ki smo ga uporabili za prevajanje, lahko kodo zapišemo takole:

.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; }

Vse, kar moramo storiti, je, da animiramo višino in dodamo nekaj zamikov! Tu so trije primeri, kjer se razlikujejo samo barve in velikosti:

Zavijanje

Upam, da ste do zdaj zelo opogumljeni zaradi vseh moči, ki jih imate za ustvarjanje zapletenih nalagalnih animacij. Vse, kar potrebujemo, je en element, bodisi prelivi ali psevdi za risanje palic, nato pa nekaj ključnih sličic za premikanje stvari. To je celoten recept za neskončno število možnosti, zato pojdite ven in začnite kuhati nekaj lepih stvari!

Do naslednjega članka vam bom pustil smešno zbirko nakladalcev, kjer kombiniram pike in palice!

---

Nakladalniki enega elementa: palice prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Vir: https://css-tricks.com/single-element-loaders-the-bars/