Nakladalniki enega elementa: Spinner

Izdelava nalagalnikov samo za CSS je ena mojih najljubših nalog. Vedno je prijetno gledati te neskončne animacije. In seveda obstajajo veliko tehnik in pristopov za njihovo izdelavo – ni potrebe poglej dlje kot CodePen da vidim koliko. V tem članku pa bomo videli, kako narediti nalagalnik enega elementa, da piše čim manj kode.

Imam naredil zbirko več kot 500 enojnih nakladalnikov in v tej štiridelni seriji bom delil trike, s katerimi sem jih ustvaril veliko. Zajeli bomo ogromno primerov, ki bodo pokazali, kako lahko majhne prilagoditve vodijo do zabavnih variacij in kako malo kode moramo napisati, da se vse to zgodi!

Za ta prvi članek bomo ustvarili enega najpogostejših vzorcev nakladalnika: vrtljive palice:

Tukaj je pristop

Trivialna izvedba tega nalagalnika je ustvariti en element za vsako vrstico, ovito znotraj nadrejenega elementa (za skupno devet elementov), ​​nato pa se poigrati z opacity in transform da dosežete učinek vrtenja.

Moja izvedba pa zahteva le en element:

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

... in 10 deklaracij CSS:

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

Razčlenimo to

Na prvi pogled je koda morda videti nenavadna, vendar boste videli, da je preprostejša, kot si mislite. Prvi korak je določitev dimenzije elementa. V našem primeru je to a 150px kvadrat. Lahko postavimo aspect-ratio uporabiti tako, da element ostane kvadraten ne glede na vse.

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

Pri gradnji nalagalnikov CSS vedno poskušam imeti eno vrednost za nadzor celotne velikosti. V tem primeru je to width in vsi izračuni, ki jih pokrivamo, se bodo nanašali na to vrednost. To mi omogoča, da spremenim eno samo vrednost za nadzor nalagalnika. Vedno je pomembno, da lahko enostavno prilagodimo velikost naših nakladalnikov, ne da bi bilo treba prilagoditi veliko dodatnih vrednosti.

Nato bomo uporabili prelive za ustvarjanje palic. To je najtežji del! Uporabimo ena gradient za ustvarjanje dva vrstice, kot so spodnje:

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

Naš gradient je definiran z eno barvo in dvema barvnima točkama. Rezultat je enobarvna barva brez bledenja ali prehodov. Velikost je enaka 34% široka in 8% visok. Postavljen je tudi v sredino (50%). Trik je v uporabi vrednosti ključne besede space — to podvoji gradient, kar nam daje dve skupni vrstici.

od specifikacijo:

Slika se ponavlja tako pogosto, kot se prilega območju za pozicioniranje ozadja, ne da bi bila obrezana, nato pa se slike razmaknejo, da zapolnijo območje. Prva in zadnja slika se dotikata robov območja.

Uporabljam širino, ki je enaka 34% kar pomeni, da ne moremo imeti več kot dveh črtic (3*34% je večja kakor 100%), toda z dvema črtama bomo imeli prazne prostore (100% - 2 * 34% = 32%). Ta prostor je postavljen v sredino med dvema palicama. Z drugimi besedami, uporabljamo širino za gradient, ki je vmes 33% in 50% da zagotovimo, da imamo vsaj dve palici z malo prostora med njima. Vrednost space je tisto, kar nam jih pravilno postavi.

Naredimo enako in naredimo drugi podoben gradient, da dobimo še dve vrstici na vrhu in na dnu, kar nam da a background vrednost nepremičnine:

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

To lahko optimiziramo s spremenljivko CSS, da se izognemo ponavljanju:

--_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;

Tako imamo zdaj štiri vrstice in zahvaljujoč spremenljivkam CSS lahko vrednost barve zapišemo enkrat, kar olajša kasnejšo posodobitev (kot smo storili z velikostjo nalagalnika).

Če želite ustvariti preostale vrstice, se dotaknimo .loader element in njegov ::before psevdoelement, da dobite še štiri vrstice za skupaj osem.

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

Upoštevajte uporabo display: grid. To nam omogoča, da se zanesemo na privzeto omrežje stretch poravnava, da psevdoelement pokrije celotno območje svojega starša; zato ni potrebe po določanju dimenzije na njem — še en trik, ki zmanjša kodo in nam prepreči, da bi imeli opravka z veliko vrednostmi!

Zdaj zavrtimo psevdoelement za 45deg da postavite preostale palice. Premaknite miškin kazalec na naslednjo predstavitev, da vidite trik:

Nastavitev motnosti

Kar poskušamo storiti, je ustvariti vtis, da obstaja ena vrstica, ki za seboj pušča sled bledečih črt, ko potuje po krožni poti. Zdaj se moramo poigrati s prosojnostjo naših palic, da naredimo to sled, kar bomo naredili s CSS mask v kombinaciji s stožčastim gradientom, kot sledi:

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

Da bi bolje videli trik, uporabimo to za polnobarvno polje:

Prosojnost rdeče barve postopoma narašča v smeri urinega kazalca. To uporabimo za naš nakladalnik in imamo palice z različno motnostjo:

V resnici se zdi, da vsaka vrstica zbledi, ker je zakrita s prelivom in pade med dve polprosojni barvi. Ko se to izvaja, je komaj opazno, zato je nekako tako, kot da bi lahko rekli, da imajo vse vrstice enako barvo z različno stopnjo motnosti.

Vrtenje

Uporabimo animacijo vrtenja, da dobimo naš nakladalnik. Upoštevajte, da potrebujemo stopničasto animacijo in ne neprekinjene, zato jo uporabljam steps(8). 8 ni nič drugega kot število palic, tako da je to vrednost mogoče spremeniti glede na to, koliko palic je v uporabi.

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

To je to! Naš nalagalnik imamo samo z enim elementom in nekaj vrsticami CSS. Z nastavitvijo ene vrednosti lahko preprosto nadzorujemo njegovo velikost in barvo.

Ker smo uporabljali samo ::before psevdoelement, lahko z uporabo dodamo še štiri vrstice ::after na koncu s skupno 12 vrsticami in skoraj enako kodo:

Posodobimo rotacijo naših psevdoelementov, da jih upoštevamo 30deg in 60deg Namesto 45deg pri uporabi animacije v dvanajstih korakih namesto v osmih. Zmanjšal sem tudi višino na 5% Namesto 8% da so palice nekoliko tanjše.

Upoštevajte tudi, da imamo grid-area: 1/1 na psevdoelementih. To nam omogoča, da jih postavimo na isto območje enega na drugega, zložene enega na drugega.

Ugani kaj? Isti nalagalnik lahko dosežemo z uporabo druge izvedbe:

Ali lahko ugotovite logiko za kodo? Tukaj je namig: motnosti ne obravnava več CSS mask ampak znotraj gradienta in uporablja tudi opacity nepremičnine.

Zakaj ne namesto tega pike?

To popolnoma zmoremo:

Če preverite kodo, boste videli, da zdaj delamo z radialnim gradientom namesto z linearnim. Sicer je koncept popolnoma enak, kjer maska ​​ustvari vtis motnosti, le da smo oblike naredili kot kroge namesto črt.

Spodaj je slika za ponazoritev nove konfiguracije gradienta:

Če uporabljate Safari, upoštevajte, da ima demo morda napake. To je zato, ker Safari trenutno nima podpore za at sintaksa v radialnih prelivih. Vendar pa lahko gradient nekoliko preoblikujemo, da to odpravimo:

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

Več primerov nakladalnikov

Tukaj je še ena ideja za vrtljivi nakladalnik, podoben prejšnjemu.

Za to se zanašam samo na background in mask ustvariti obliko (psevdoelementi niso potrebni). Prav tako definiram konfiguracijo s spremenljivkami CSS, da lahko ustvarim veliko različic iz iste kode – še en primer moči spremenljivk CSS. O tej tehniki sem napisal še en članek če želite več podrobnosti.

Upoštevajte, da se nekateri brskalniki še vedno zanašajo na a -webkit- predpona za mask-composite z lastnim nizom vrednosti in ne bo prikazal vrtavke v predstavitvi. Tukaj je način za to brez mast-composite za večjo podporo brskalnika.

Imam še enega zate:

Za tole uporabljam a background-color za nadzor barve in uporabo mask in mask-composite za ustvarjanje končne oblike:

Preden končamo, je tukaj še nekaj vrtljivih nakladalnikov, ki sem jih izdelal pred časom. Zanašam se na različne tehnike, vendar še vedno uporabljam prelive, maske, psevdoelemente itd. Lahko bi bila dobra vaja, da ugotovim logiko vsake od njih in se hkrati naučim novih trikov. Če imate kakršna koli vprašanja o njih, je razdelek za komentarje spodaj.

Zavijanje

Vidite, v CSS lahko naredimo toliko stvari, razen z enim divom, nekaj prelivi, psevdoelementi, spremenljivkami. Zdi se, kot da smo ustvarili cel kup različnih vrtečih se nakladalnikov, vendar so vsi v bistvu enaki z majhnimi spremembami.

To je šele začetek. V tej seriji si bomo ogledali več idej in naprednih konceptov za ustvarjanje nalagalnikov CSS.

---

Nakladalniki enega elementa: Spinner 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.
• Source: https://css-tricks.com/single-element-loaders-the-spinner/