Ühe elemendiga laadurid: Spinner

Ainult CSS-laadurite tegemine on üks minu lemmikülesandeid. Neid lõpmatuid animatsioone on alati meeldiv vaadata. Ja loomulikult on neid palju tehnikaid ja lähenemisviise nende tegemiseks – pole vaja vaadake CodePenist kaugemale et näha, kui palju. Selles artiklis aga näeme, kuidas panna ühe elemendi laadija kirjutama võimalikult vähe koodi.

Ma pean tegi kollektsiooni enam kui 500 üksiklaadurist ja selles neljaosalises sarjas jagan nippe, mida kasutasin paljude nende loomisel. Me käsitleme tohutul hulgal näiteid, mis näitavad, kuidas väikesed kohandused võivad viia lõbusate variatsioonideni ja kui vähe koodi peame selle kõige teoks tegemiseks kirjutama!

Selle esimese artikli jaoks loome ühe enamlevinud laadimismustri: pöörlevad latid:

Siin on lähenemine

Selle laadija triviaalne teostus on luua üks element iga põhielemendi sisse mähitud riba jaoks (kokku üheksa elemendi jaoks), seejärel mängida opacity ja transform pöörleva efekti saamiseks.

Minu rakendamine nõuab aga ainult ühte elementi:

<div class="loader"></div>

…ja 10 CSS-deklaratsiooni:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Teeme selle lahti

Esmapilgul võib kood tunduda kummaline, kuid näete, et see on lihtsam kui see, mida arvate. Esimene samm on elemendi mõõtme määratlemine. Meie puhul on see a 150px ruut. Võime panna aspect-ratio kasutada, et element jääks ruudukujuliseks, ükskõik mida.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

CSS-laadurite ehitamisel püüan alati kogu suuruse kontrollimiseks kasutada ühte väärtust. Sel juhul on see width ja kõik arvutused, mida me käsitleme, viitavad sellele väärtusele. See võimaldab mul laaduri juhtimiseks muuta ühte väärtust. Alati on oluline, et saaksime hõlpsasti reguleerida meie laadurite suurust, ilma et oleks vaja kohandada palju lisaväärtusi.

Järgmisena kasutame ribade loomiseks gradiente. See on kõige keerulisem osa! Kasutame ära üks gradient luua kaks baarid nagu allpool:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Meie gradient on määratletud ühe värvi ja kahe värvipeatusega. Tulemuseks on ühtlane värv ilma pleekimise ja üleminekuteta. Suurus on võrdne 34% lai ja 8% pikk. See on paigutatud ka keskele (50%). Trikk on märksõna väärtuse kasutamine space — see dubleerib gradienti, andes meile kokku kaks riba.

alates spetsifikatsioon:

Pilti korratakse nii tihti, kui mahub taustal paiknevale positsioneerimisalale ilma kärpimata ja seejärel jaotatakse kujutised ala täitmiseks. Esimene ja viimane pilt puudutavad ala servi.

Ma kasutan laiust, mis on võrdne 34% mis tähendab, et meil ei saa olla rohkem kui kaks riba (3*34% on suurem kui 100%), kuid kahe tulbaga jääme tühjaks (100% - 2 * 34% = 32%). See ruum asetatakse kahe riba vahele. Teisisõnu kasutame gradiendi laiust, mis jääb vahele 33% ja 50% veendumaks, et meil on vähemalt kaks riba, mille vahel on natuke ruumi. Väärtus space on see, mis need meie jaoks õigesti paigutab.

Teeme sama ja teeme teise sarnase gradiendi, et saada üleval ja all veel kaks riba, mis annavad meile background vara väärtus:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Kordamise vältimiseks saame seda optimeerida CSS-muutuja abil:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Nüüd on meil neli riba ja tänu CSS-i muutujatele saame värviväärtuse kirjutada ühe korra, mis muudab selle hilisema värskendamise lihtsaks (nagu tegime laadija suuruse puhul).

Ülejäänud ribade loomiseks puudutage valikut .loader element ja see ::before pseudoelement, et saada veel neli takti kokku kaheksa.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Pange tähele kasutamist display: grid. See võimaldab meil tugineda võrgu vaikeseadetele stretch joondus, et pseudoelement kataks kogu oma vanema ala; seega pole vaja sellele dimensiooni määrata – veel üks nipp, mis vähendab koodi ja väldib paljude väärtustega tegelemist!

Nüüd pöörame pseudoelementi võrra 45deg ülejäänud ribade paigutamiseks. Triki nägemiseks hõljutage kursorit järgmisel demol:

Läbipaistmatuse seadistamine

Püüame jätta mulje, nagu oleks üks latt, mis ringteel liikudes jätab enda taha tuhmuvate lattide jälje. Nüüd on meil vaja mängida oma ribade läbipaistvusega, et seda rada teha, mida me teeme CSS-iga mask kombineerituna koonuse gradiendiga järgmiselt:

mask: conic-gradient(from 22deg,#0003,#000);

Et seda nippi paremini näha, rakendame seda täisvärvilisele kastile:

Punase värvi läbipaistvus suureneb järk-järgult päripäeva. Rakendame seda oma laadurile ja meil on erineva läbipaistmatusega vardad:

Tegelikkuses näib iga riba tuhmuvat, kuna seda varjab gradient ja see jääb kahe poolläbipaistva värvi vahele. Kui see töötab, on see vaevalt märgatav, nii et see on nagu oleks võimalik öelda, et kõigil ribadel on sama värv ja erinev läbipaistmatus.

Pöörlemine

Rakendame laaduri hankimiseks pöörlemisanimatsiooni. Pange tähele, et vajame astmelist animatsiooni, mitte pidevat, sellepärast ma kasutan steps(8). 8 ei ole midagi muud kui tulpade arv, nii et seda väärtust saab muuta olenevalt kasutatavate ribade arvust.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

See on kõik! Meil on laadur, millel on ainult üks element ja paar rida CSS-i. Selle suurust ja värvi saame hõlpsalt juhtida, reguleerides ühte väärtust.

Kuna kasutasime ainult ::before pseudoelement, saame kasutades lisada veel neli riba ::after lõpetada kokku 12 triibuga ja peaaegu sama koodiga:

Värskendame oma pseudoelementide pöörlemist, mida kaaluda 30deg ja 60deg asemel 45deg kasutades kaheteistastmelist animatsiooni, mitte kaheksat. Vähendasin ka kõrgust 5% asemel 8% et kangid oleksid veidi õhemad.

Pange tähele ka seda, et meil on grid-area: 1/1 pseudoelementide kohta. See võimaldab meil asetada need üksteisega samale alale, virnastatud üksteise peale.

Arva ära? Saame jõuda sama laaduri poole, kasutades teist rakendust:

Kas saate aru koodi taga olevast loogikast? Siin on vihje: läbipaistmatust ei käsitleta enam CSS-iga mask kuid sees gradient ja kasutab ka opacity vara.

Miks mitte täpid asemel?

Me saame sellega täiesti hakkama:

Kui kontrollite koodi, näete, et nüüd töötame lineaarse gradiendi asemel radiaalse gradiendiga. Muidu on kontseptsioon täpselt sama, kus mask jätab läbipaistmatuse mulje, aga kujundid tegime joonte asemel ringidena.

Allpool on joonis, mis illustreerib uut gradiendi konfiguratsiooni:

Kui kasutate Safarit, võtke arvesse, et demo võib olla vigane. Selle põhjuseks on asjaolu, et Safaril puudub praegu selle jaoks tugi at süntaks radiaalsetes gradientides. Kuid me saame gradienti veidi ümber konfigureerida, et sellest üle saada:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Rohkem laadurite näiteid

Siin on veel üks eelmisega sarnase spinnerlaaduri idee.

Selle puhul toetun ainult sellele background ja mask kujundi loomiseks (pole vaja pseudoelemente). Samuti defineerin konfiguratsiooni CSS-i muutujatega, et saaksin luua samast koodist palju variatsioone – veel üks näide CSS-i muutujate võimsustest. Kirjutasin selle tehnika kohta veel ühe artikli kui soovite rohkem üksikasju.

Pange tähele, et mõned brauserid toetuvad endiselt a -webkit- eesliide jaoks mask-composite oma väärtuste komplektiga ja ei kuva demos ketrust. Siin on viis, kuidas seda teha ilma mast-composite brauseri täiendava toe saamiseks.

Mul on sulle veel üks:

Selle jaoks kasutan ma a background-color värvi kontrollimiseks ja kasutamiseks mask ja mask-composite lõpliku kuju loomiseks:

Enne kui lõpetame, on siin veel mõned pöörlevad laadurid, mille ma mõni aeg tagasi tegin. Toetun erinevatele tehnikatele, kuid kasutan siiski gradiente, maske, pseudoelemente jne. See võib olla hea harjutus, et mõista igaühe loogikat ja õppida samal ajal uusi nippe. See ütles, et kui teil on nende kohta küsimusi, on kommentaaride jaotis allpool.

Pakke kuni

Vaata, CSS-is saame teha nii palju, kui ainult üks div, paar gradienti, pseudoelemente ja muutujaid. Näib, et oleme loonud terve hulga erinevaid pöörlevaid laadureid, kuid need on kõik väikeste muudatustega põhimõtteliselt samad.

See on alles algus. Selles seerias vaatleme rohkem ideid ja täiustatud kontseptsioone CSS-laadurite loomiseks.

---

Ühe elemendiga laadurid: Spinner 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-spinner/