Yksiosaiset kuormaajat: baarit

Olemme katsoneet spinnereita. Olemme katsoneet pisteitä. Nyt käsittelemme toista yleistä kuormaajien mallia: baarit. Ja aiomme tehdä saman tässä sarjan kolmannessa artikkelissa kuin muutkin tekemällä siitä vain yhden elementin ja joustavan CSS:n, joka tekee muunnelmien luomisesta helppoa.

Aloitetaan ei yhdestä, ei kahdesta, vaan 20 esimerkistä tankokuormaajista.

Mitä?! Aiotko kertoa niistä jokaisesta? Se on liikaa artikkelille!

Se saattaa näyttää siltä ensi silmäyksellä! Mutta ne kaikki perustuvat samaan koodirakenteeseen, ja päivitämme vain muutamia arvoja muunnelmien luomiseksi. Siinä kaikki CSS:n voima. Emme opi luomaan yhtä latausohjelmaa, mutta opimme erilaisia ​​tekniikoita, joiden avulla voimme luoda niin monta latauslaitetta kuin haluamme käyttämällä vain samaa koodirakennetta.

Tehdään baareja!

Aloitamme määrittelemällä niiden mitat käyttämällä width (Tai height) Kanssa aspect-ratio suhteellisuuden säilyttämiseksi:

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

Me tavallaan "tekelemme" kolmea palkkia, joiden taustalla on lineaarinen gradientti. Tämä on hyvin samanlainen tapa kuin loimme pistelataajia tämän sarjan osassa 2.

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

Yllä oleva koodi antaa meille seuraavan tuloksen:

Kuten muutkin tämän sarjan artikkelit, käsittelemme monia asioita background huijausta. Joten jos sinusta tuntuu, että hyppäämme liian nopeasti tai tarvitset hieman lisätietoja, tarkista ne. Voit myös lukea minun Stack Overflow vastaus missä annan yksityiskohtainen selitys miten tämä kaikki toimii.

Baarien animointi

Luomme palkkilataimen joko animoimalla elementin koon tai sijainnin. Animoidaan koko määrittämällä seuraavat animaation avainkehykset:

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

Katso mitä siellä tapahtuu? 0–100 %:n välillä animaatio muuttaa background-size elementin taustagradientista. Jokainen avainkehys asettaa kolme taustakokoa (yksi kullekin liukuvärille).

Ja tässä on mitä saamme:

Voitko alkaa kuvitella kaikkia mahdollisia muunnelmia, joita voimme saada pelaamalla erilaisilla kokojen tai asentojen animaatiokonfiguraatioilla?

Korjataan koko 20% 50% ja päivitä paikat tällä kertaa:

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

…mikä saa meille uuden kuormaajan!

Olet luultavasti tajunnut tempun jo nyt. Sinun tarvitsee vain määrittää aikajana, jonka käännät avainkehykseksi. Animoimalla koko, sijainti - tai molemmat! — ulottuvillamme on ääretön määrä kuormausmahdollisuuksia.

Ja kun olemme tottuneet käyttämään tällaista tekniikkaa, voimme mennä pidemmälle ja käyttää monimutkaisempaa gradienttia tasaisen luomiseen lisää kuormaajat.

Odotettavissa, että demon kahdessa viimeisessä esimerkissä kaikki palkkilataajat käyttävät samaa taustalla olevaa merkintää ja tyylejä sekä erilaisia ​​animaatioiden yhdistelmiä. Avaa koodi ja yritä visualisoida jokainen kehys erikseen; näet kuinka suhteellisen triviaalia on tehdä kymmeniä — ellei satoja - muunnelmista.

Alkaa näyttämään

Muistatko maskitempun, jonka teimme pistelataajien kanssa tämän sarjan toinen artikkeli? Voimme tehdä saman täällä!

Jos käytämme kaikkea yllä olevaa logiikkaa sisällä mask Voimme käyttää mitä tahansa taustakokoonpanoa lisätäksemme kuvitteellisen värin kuormaimeihimme.

Otetaan yksi demo ja päivitetään se:

Ainoa mitä tein, on päivittänyt kaikki background-* with mask-* ja lisäsin gradienttivärin. Näin yksinkertaista ja silti saamme toisen siistin kuormaimen.

Eli pisteiden ja palkkien välillä ei ole eroa?

Ei eroa! Kirjoitin kaksi eri artikkelia kattamaan mahdollisimman monta esimerkkiä, mutta molemmissa luotan samoihin tekniikoihin:

1. Liukuvärit muotojen luomiseksi (pisteet tai palkit tai ehkä jotain muuta)
2. animating background-size ja / tai background-position ladataksesi latausanimaatiota
3. Lisäämällä naamion ripaus värejä

Tankojen pyöristäminen

Kokeillaan tällä kertaa jotain erilaista, jossa pystymme pyörittämään tangomme reunoja.

Käyttämällä yhtä elementtiä ja sen ::before ja ::after pseudot, määrittelemme kolme identtistä palkkia:

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

Tämä antaa meille kolme palkkia, tällä kertaa ilman lineaarista gradienttia:

Nyt temppu on täyttää nuo palkit ihanalla kaltevuudella. Jatkuvan gradientin simuloimiseksi meidän on leikittävä background ominaisuuksia. Yllä olevassa kuvassa viheralue määrittelee kuormaimen peittämän alueen. Tämän alueen tulee olla gradientin kokoinen ja jos lasketaan, se vastaa molempien merkittyjen puolten kertomista S kaaviossa tai background-size: var(--s) var(--s).

Koska elementtimme on sijoitettu yksittäin, meidän on päivitettävä gradientin sijainti jokaisen sisällä varmistaaksemme, että ne kaikki menevät päällekkäin. Tällä tavalla simuloimme yhtä jatkuvaa gradienttia, vaikka se on itse asiassa kolme.

Pääelementille (sijoitetaan keskelle) taustan on oltava keskellä. Käytämme seuraavia:

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

Vasemmalla olevaa pseudoelementtiä varten tarvitsemme taustan vasemmalla

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

Ja oikeanpuoleisen pseudon tausta on sijoitettava oikealle:

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

Käyttämällä samaa CSS-muuttujaa, --_i, jota käytimme kääntämiseen, voimme kirjoittaa koodin seuraavasti:

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

Nyt meidän tarvitsee vain animoida korkeus ja lisätä viiveitä! Tässä on kolme esimerkkiä, joissa kaikki eroavat värit ja koot:

Käärimistä

Toivon, että toistaiseksi tunnet olosi erittäin rohkaisevaksi kaikista voimista, joita sinulla on tehdä monimutkaisen näköisiä latausanimaatioita. Tarvitsemme vain yhden elementin, joko liukuvärit tai pseudot pylväiden piirtämiseen, ja sitten avainkehykset asioiden siirtämiseen. Tämä on koko resepti loputtomien mahdollisuuksien hankkimiseen, joten mene ulos ja aloita kokkaamaan hienoja juttuja!

Seuraavaan artikkeliin asti jätän sinulle hauskan kuormaimen kokoelman, johon yhdistän pisteitä ja baarit!

---

Yksiosaiset kuormaajat: baarit alun perin julkaistu CSS-temppuja. Sinun pitäisi hanki uutiskirje.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://css-tricks.com/single-element-loaders-the-bars/