Single Element Loaders: Spinner

CSS-latainten tekeminen on yksi suosikkitehtävistäni. On aina ilahduttavaa katsoa noita loputtomia animaatioita. Ja tietysti niitä on erien tekniikoita ja lähestymistapoja niiden tekemiseen – ei tarvetta katso CodePeniä pidemmälle nähdäksesi kuinka monta. Tässä artikkelissa näemme kuitenkin, kuinka saada yhden elementin latausohjelma kirjoittamaan mahdollisimman vähän koodia.

Olen teki kokoelman yli 500 yksisukelluskuormaajaa ja tässä neliosaisessa sarjassa aion jakaa temppuja, joita käytin luoessani monia niistä. Käsittelemme valtavan määrän esimerkkejä, jotka osoittavat, kuinka pienet muutokset voivat johtaa hauskoihin muunnelmiin ja kuinka vähän koodia meidän on kirjoitettava, jotta kaikki tapahtuu!

Tätä ensimmäistä artikkelia varten aiomme luoda yhden yleisimmistä kuormauskuvioista: pyörivät tangot:

Tässä on lähestymistapa

Tämän lataajan triviaali toteutus on luoda yksi elementti jokaista pääelementin sisälle käärittyä palkkia kohti (yhteensä yhdeksälle elementille) ja sitten pelata opacity ja transform saadaksesi pyörivä vaikutus.

Toteutukseni vaatii kuitenkin vain yhden elementin:

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

…ja 10 CSS-ilmoitusta:

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

Puretaan se

Ensi silmäyksellä koodi saattaa näyttää oudolta, mutta huomaat, että se on yksinkertaisempi kuin luulisi. Ensimmäinen vaihe on määrittää elementin mitat. Meidän tapauksessamme se on a 150px neliö. Voimme laittaa aspect-ratio jotta elementti pysyy suorassa riippumatta siitä, mitä.

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

Kun rakennan CSS-lataajia, yritän aina käyttää yhtä arvoa kokonaiskoon hallitsemiseksi. Tässä tapauksessa se on width ja kaikki kattamamme laskelmat viittaavat tähän arvoon. Tämän ansiosta voin muuttaa yhtä arvoa kuormaimen ohjaamiseksi. On aina tärkeää pystyä säätämään kuormaimemme kokoa helposti ilman, että tarvitsee säätää monia lisäarvoja.

Seuraavaksi käytämme liukuvärejä palkkien luomiseen. Tämä on vaikein osa! Käytetään yksi luotava gradientti kaksi alla olevat baarit:

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

Gradienttimme määritellään yhdellä värillä ja kahdella väripysäytyksellä. Tuloksena on tasainen väri ilman haalistumista tai siirtymiä. Koko on yhtä suuri kuin 34% leveä ja 8% pitkä. Se on myös sijoitettu keskelle (50%). Temppu on avainsanan arvon käyttö space - tämä kopioi gradientin, jolloin saamme kaksi kokonaispalkkia.

alkaen eritelmä:

Kuvaa toistetaan niin usein kuin mahtuu taustan sijaintialueelle leikkaamatta, ja sitten kuvat jaetaan erilleen täyttämään alueen. Ensimmäinen ja viimeinen kuva koskettavat alueen reunoja.

Käytän leveyttä, joka on yhtä suuri kuin 34% mikä tarkoittaa, että meillä ei voi olla enempää kuin kaksi palkkia (3*34% on suurempi kuin 100%), mutta kahdella palkilla meillä on tyhjiä tiloja (100% - 2 * 34% = 32%). Tämä tila on sijoitettu keskelle kahden tangon väliin. Toisin sanoen käytämme gradientin leveyttä, joka on välissä 33% ja 50% varmistaaksemme, että meillä on vähintään kaksi palkkia, joiden välissä on vähän tilaa. Arvo space se asettaa ne meille oikein.

Teemme samoin ja teemme toisen samanlaisen gradientin saadaksemme kaksi palkkia lisää ylä- ja alaosaan, mikä antaa meille background omaisuuden arvo:

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

Voimme optimoida sen käyttämällä CSS-muuttujaa toiston välttämiseksi:

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

Joten nyt meillä on neljä palkkia ja CSS-muuttujien ansiosta voimme kirjoittaa värin arvon kerran, mikä helpottaa päivittämistä myöhemmin (kuten teimme lataajan koon kanssa).

Voit luoda loput palkit napauttamalla .loader elementti ja sen ::before pseudoelementti saada neljä lisätahtia yhteensä kahdeksan.

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

Huomaa käyttö display: grid. Tämä antaa meille mahdollisuuden luottaa ruudukon oletusasetuksiin stretch kohdistus, jotta pseudoelementti kattaa koko emoelementin alueen; joten sille ei tarvitse määrittää ulottuvuutta – toinen temppu, joka vähentää koodia ja estää meitä käsittelemästä monia arvoja!

Kierretään nyt pseudoelementtiä 45deg sijoittaaksesi jäljellä olevat palkit. Vie hiiri seuraavaan demoon nähdäksesi tempun:

Peittävyyden asetus

Yritämme luoda vaikutelman, että yksi palkki jättää taakseen haalistuvien palkkien jäljen kulkiessaan ympyrämäistä polkua. Meidän on nyt leikittävä palkkiemme läpinäkyvyydellä tehdäksemme sen jäljen, minkä aiomme tehdä CSS:n avulla. mask yhdistettynä kartiogradienttiin seuraavasti:

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

Jotta tempun näkee paremmin, sovelletaan tätä täysväriseen laatikkoon:

Punaisen värin läpinäkyvyys kasvaa vähitellen myötäpäivään. Käytämme tätä kuormaajaamme ja meillä on eri opasiteetilla olevia tangoja:

Todellisuudessa jokainen palkki näyttää haalistuvan, koska se on kaltevuuden peittämä ja putoaa kahden puoliksi läpinäkyvän värin väliin. Se on tuskin havaittavissa, kun tämä toimii, joten se on ikään kuin voisi sanoa, että kaikilla palkkeilla on sama väri ja erilainen peittävyys.

Kierto

Käytämme pyöritysanimaatiota saadaksemme kuormaimemme. Huomaa, että tarvitsemme porrastetun animaation, ei jatkuvaa, siksi käytän steps(8). 8 on vain palkkien lukumäärä, joten arvoa voidaan muuttaa riippuen siitä, kuinka monta palkkia on käytössä.

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

Se siitä! Meillä on latausohjelmamme, jossa on vain yksi elementti ja muutama CSS-rivi. Voimme helposti hallita sen kokoa ja väriä säätämällä yhtä arvoa.

Koska käytimme vain ::before pseudo-elementti, voimme lisätä neljä palkkia lisää käyttämällä ::after loppuun yhteensä 12 palkkia ja lähes sama koodi:

Päivitämme pseudoelementtiemme kiertoa harkittavaksi 30deg ja 60deg sijasta 45deg kun käytät XNUMX-vaiheista animaatiota kahdeksan sijaan. Vähensin myös korkeutta 5% sijasta 8% jotta tangoista tulee hieman ohuempia.

Huomaa myös, että meillä on grid-area: 1/1 pseudoelementeillä. Näin voimme sijoittaa ne samalle alueelle toistensa kanssa pinottuna päällekkäin.

Arvaa mitä? Voimme saavuttaa saman latausohjelman toisella toteutuksella:

Voitko selvittää koodin takana olevan logiikan? Tässä on vihje: peittävyyttä ei enää käsitellä CSS:llä mask mutta kaltevuuden sisällä ja käyttää myös opacity omaisuutta.

Miksei sen sijaan pisteitä?

Pystymme siihen täysin:

Jos tarkistat koodin, huomaat, että työskentelemme nyt säteittäisellä gradientilla lineaarisen gradientin sijaan. Muuten konsepti on täsmälleen sama, jossa maski luo vaikutelman läpinäkymättömyydestä, mutta teimme muodot ympyröiksi viivojen sijaan.

Alla on kuva, joka havainnollistaa uutta gradienttikokoonpanoa:

Jos käytät Safaria, huomaa, että demo voi olla buginen. Tämä johtuu siitä, että Safarilla ei tällä hetkellä ole tukea at syntaksi säteittäisissä gradienteissa. Mutta voimme määrittää gradientin hieman uudelleen tämän ratkaisemiseksi:

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

Lisää latausesimerkkejä

Tässä on toinen idea edellisen kaltaisesta spinnerikuormaajasta.

Tämän osalta luotan vain background ja mask muodon luomiseen (pseudoelementtejä ei tarvita). Määritän myös konfiguraation CSS-muuttujilla, jotta voisin luoda useita muunnelmia samasta koodista - toinen esimerkki vain CSS-muuttujien tehoista. Kirjoitin tästä tekniikasta toisen artikkelin jos haluat lisätietoja.

Huomaa, että jotkin selaimet käyttävät edelleen a -webkit- etuliite for mask-composite jolla on omat arvot, eikä se näytä kehrää demossa. Tässä on tapa tehdä se ilman mast-composite saadaksesi lisää selaintukea.

Minulla on sinulle toinen:

Tätä varten käytän a background-color hallita väriä ja käyttää mask ja mask-composite luodaksesi lopullisen muodon:

Ennen kuin lopetamme, tässä on lisää pyöriviä kuormaajia, joita tein jokin aika sitten. Luotan eri tekniikoihin, mutta käytän edelleen gradientteja, naamioita, pseudoelementtejä jne. Voisi olla hyvä harjoitus selvittää jokaisen logiikka ja samalla oppia uusia temppuja. Tämä sanoi, jos sinulla on kysyttävää niistä, kommenttiosio on alla.

Käärimistä

Katsos, CSS:ssä voi tehdä niin paljon vain yhdellä div:llä, parilla gradientilla, pseudoelementeillä ja muuttujilla. Näyttää siltä, ​​että loimme koko joukon erilaisia ​​pyöriviä kuormaajia, mutta ne ovat kaikki periaatteessa sama asia pienin muutoksin.

Tämä on vasta alkua. Tässä sarjassa tarkastelemme lisää ideoita ja edistyneitä konsepteja CSS-latainten luomiseen.

---

Single Element Loaders: Spinner 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-spinner/