Ühe elemendiga laadurid: baarid

Vaatasime spinnereid. Vaatasime punkte. Nüüd käsitleme veel üht laadurite jaoks levinud mustrit: baarid. Ja me teeme selles sarja kolmandas artiklis sama, mis meil teistes, tehes selle ainult ühe elemendiga ja paindliku CSS-iga, mis muudab variatsioonide loomise lihtsaks.

Alustame mitte ühe, mitte kahe, vaid 20 baarilaaduri näitega.

Mida?! Kas kavatsete neid kõiki üksikasjalikult kirjeldada? Seda on artikli jaoks liiga palju!

See võib esmapilgul nii tunduda! Kuid kõik need tuginevad samale koodistruktuurile ja variatsioonide loomiseks värskendame vaid mõnda väärtust. See on kogu CSS-i jõud. Me ei õpi ühe laadija loomist, vaid õpime erinevaid tehnikaid, mis võimaldavad meil luua sama koodistruktuuri kasutades nii palju laadijaid, kui tahame.

Teeme mõned batoonid!

Alustuseks määrame nende jaoks mõõtmed width (Või height) koos aspect-ratio proportsiooni säilitamiseks:

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

Me omamoodi „võltsime” kolme riba, mille taustal on lineaarne gradient – ​​väga sarnane sellele, kuidas lõime selle sarja 2. osas punktlaadurid.

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

Ülaltoodud kood annab meile järgmise tulemuse:

Sarnaselt teistele selle seeria artiklitele käsitleme me paljusid background trikitamine. Seega, kui teile tundub, et hüppame liiga kiiresti või tunnete, et vajate natuke rohkem üksikasju, vaadake neid. Võite lugeda ka minu Stack Overflow vastus, kus ma annan üksikasjalik selgitus kuidas see kõik toimib.

Baaride animeerimine

Ribalaaduri loomiseks animeerime elemendi suuruse või positsiooni. Animeerime suurust, määratledes järgmised animatsiooni võtmekaadrid:

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

Vaata, mis seal toimub? Vahemikus 0% kuni 100%, animatsioon muudab background-size elemendi tausta gradiendist. Iga võtmekaader määrab kolm tausta suurust (üks iga gradiendi jaoks).

Ja siin on see, mida me saame:

Kas saate ette kujutada kõiki võimalikke variatsioone, mida saame erinevate suuruste või positsioonide animatsioonikonfiguratsioonidega mängides?

Parandame suuruse 20% 50% ja värskendage seekord positsioone:

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

…mis annab meile uue laaduri!

Tõenäoliselt olete nüüdseks nipist aru saanud. Kõik, mida vajate, on määratleda ajaskaala, mille tõlgite võtmekaadriks. Animeerides suurust, positsiooni või mõlemat! — meie käeulatuses on lõpmatu arv laadurivõimalusi.

Ja kui oleme sellise tehnikaga rahul, võime minna kaugemale ja kasutada keerukamat gradienti, et luua ühtlane rohkem laadurid.

Selle demo kahe viimase näite puhul kasutavad kõik ribalaadurid samu aluseks olevaid märgistusi ja stiile ning erinevaid animatsioonide kombinatsioone. Avage kood ja proovige iga kaadrit iseseisvalt visualiseerida; sa näed, kui suhteliselt triviaalne on kümneid teha — kui mitte sadu — variatsioonidest.

Muutub uhkeks

Kas mäletasite maskitrikki, mille me punktlaaduritega tegime? selle sarja teine ​​artikkel? Sama saame siin teha!

Kui rakendame kogu ülaltoodud loogikat selle sees mask võime kasutada mis tahes taustakonfiguratsiooni, et lisada oma laaduritele väljamõeldud värvitoon.

Võtame ühe demo ja värskendame seda:

Kõik, mida ma tegin, on värskendanud kõike background-* koos mask-* ja lisasin gradientvärvi. Nii lihtne ja ometi saame veel ühe laheda laaduri.

Nii et punktide ja tulpade vahel pole vahet?

Erinevust pole! Kirjutasin kaks erinevat artiklit, et hõlmata võimalikult palju näiteid, kuid mõlemas toetun samadele tehnikatele:

1. Gradiendid kujundite loomiseks (punktid või ribad või võib-olla midagi muud)
2. Animeerimine background-size ja / või background-position laadija animatsiooni loomiseks
3. Maski lisamine värvide lisamiseks

Varraste ümardamine

Proovime seekord midagi teistsugust, kus saaksime oma lattide servi ümardada.

Kasutades ühte elementi ja selle ::before ja ::after pseudod, määratleme kolm identset riba:

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

See annab meile kolm riba, seekord ilma lineaarsele gradiendile tuginemata:

Nüüd on nipp täita need ribad kauni kaldega. Pideva gradiendi simuleerimiseks peame sellega mängima background omadused. Ülaltoodud joonisel määratleb haljasala laaduriga kaetud ala. See ala peaks olema gradiendi suurus ja kui me arvutame, on see võrdne mõlema märgistatud külje korrutamisega S diagrammil või background-size: var(--s) var(--s).

Kuna meie elemendid on paigutatud eraldi, peame värskendama gradiendi asukohta igaühe sees, et tagada nende kõigi kattumine. Nii simuleerime üht pidevat gradienti, kuigi tegelikult on neid kolm.

Põhielemendi jaoks (asub keskel) peab taust olema keskel. Kasutame järgmist:

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

Vasakpoolse pseudoelemendi jaoks vajame vasakpoolset tausta

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

Ja parempoolse pseudo jaoks tuleb taust asetada paremale:

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

Kasutades sama CSS-i muutujat, --_i, mida tõlkimisel kasutasime, saame koodi kirjutada järgmiselt:

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

Nüüd on meil vaja ainult kõrgus animeerida ja lisada mõned viivitused! Siin on kolm näidet, kus erinevad on ainult värvid ja suurused.

Pakke kuni

Loodan, et siiani tunnete end ülimalt julgustatuna kõigist võimetest, mis teil on keeruka välimusega laadimisanimatsioonide tegemiseks. Kõik, mida vajame, on üks element, kas kalded või pseudod ribade joonistamiseks, seejärel mõned võtmekaadrid asjade liigutamiseks. See on kogu retsept lõputu hulga võimaluste saamiseks, nii et minge välja ja hakake korralikke asju valmistama!

Kuni järgmise artiklini jätan teile naljaka laadurite kollektsiooni, mida ma kombineerin täpid ja baarid!

---

Ühe elemendiga laadurid: baarid algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Allikas: https://css-tricks.com/single-element-loaders-the-bars/