Single Element Loaders: Going 3D!

Tämä neljäs ja viimeinen artikkelimme Pieni sarja yksielementtikuormaajiin, aiomme tutkia 3D-kuvioita. 3D-elementtiä luotaessa on vaikea kuvitella, että vain yksi HTML-elementti riittää simuloimaan jotain kuution kaikkia kuutta pintaa. Mutta ehkä pääsemme eroon jostakin enemmän kuutiosta -pitää sen sijaan näyttämällä vain muodon kolme etupuolta – se on täysin mahdollista, ja sen aiomme tehdä yhdessä.

Jaettu kuutiolataaja

Tässä on 3D-lataaja, jossa kuutio on jaettu kahteen osaan, mutta se on tehty vain yhdestä elementistä:

Kumpikin kuution puolisko on tehty pseudoelementillä:

Siistiä, eikö?! Voimme käyttää kartiogradienttia CSS:n kanssa clip-path elementin päällä ::before ja ::after pseudot simuloivat 3D-kuution kolmea näkyvää pintaa. Negatiivinen marginaali yhdistää kaksi pseudot päällekkäin ja simuloi täyttä kuutiota. Loput työstämme on enimmäkseen näiden kahden puolikkaan animointia saadaksemme siistin näköisiä kuormaajia!

Katsotaanpa visualisointia, joka selittää tämän kuution kaltaisen elementin luomiseen käytettyjen leikepolkupisteiden takana olevan matematiikan:

Meillä on muuttujamme ja yhtälö, joten pannaan ne toimiin. Ensin määritämme muuttujamme ja määritämme pääasiallisen koon .loader elementti:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Ei mitään hullua toistaiseksi. Meillä on 150px neliö, joka on asetettu joustavaksi säiliöksi. Nyt luomme pseudosi:

.loader::before,
.loader::after { content: ""; flex: 1;
}

Nämä ovat kaksi puoliskoa .loader kontti. Meidän on maalattava ne, joten se on meidän kartiomainen gradientti alkaa vaikuttaa:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

Gradientti on olemassa, mutta se näyttää oudolta. Meidän täytyy kiinnitä se elementtiin:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Varmistetaan, että molemmat puolikkaat menevät päällekkäin a:n kanssa negatiivinen marginaali:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Nyt laitetaan ne liikkeelle!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Tässä vielä viimeinen demo:

Edistymiskuution latausohjelma

Käytetään samaa tekniikkaa 3D-prosessilataimen luomiseen. Kyllä, silti vain yksi elementti!

Emme muuta mitään niin pitkälle kuin simuloimme kuutiota samalla tavalla kuin teimme aiemmin, paitsi muuttamalla kuormaimen korkeutta ja kuvasuhdetta. Tekemässämme animaatio perustuu yllättävän helppoon tekniikkaan, jossa päivitämme vasemman sivun leveyden, kun taas oikea puoli täyttää jäljellä olevan tilan, kiitos flex-grow: 1.

Ensimmäinen askel on lisätä läpinäkyvyyttä oikealle puolelle käyttämällä opacity:

Tämä simuloi vaikutusta, että kuution toinen puoli on täytetty, kun taas toinen on tyhjä. Sitten päivitämme vasemman puolen värin. Tätä varten joko päivitämme kolme väriä kartiogradientin sisällä tai teemme sen lisäämällä taustavärin background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

Tämän tempun avulla voimme päivittää värin vain kerran. Kuormaimen oikea puoli sulautuu kartion gradientin kolmen valkoisen sävyn kanssa luoden kolme uutta värisävyä, vaikka käytämme vain yhtä väriarvoa. Väritemppu!

Animoidaan kuormaajan vasemman sivun leveys:

Hups, animaatio on alussa vähän outo! Huomaatko kuinka se alkaa kuution ulkopuolella? Tämä johtuu siitä, että aloitamme animaation klo 0% leveys. Mutta johtuen clip-path ja negatiivinen marginaali, jota käytämme, meidän on sen sijaan aloitettava omasta --_d muuttuja, jota käytimme määrittämään clip-path pisteet ja negatiivinen marginaali:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

Se on vähän parempi:

Mutta voimme tehdä tästä animaatiosta vieläkin sujuvamman. Huomasitko, että meiltä puuttuu jotain? Näytän sinulle kuvakaappauksen, jonka avulla voit verrata, miltä lopullisen demon pitäisi näyttää viimeiseen demoon:

Se on kuution alapuoli! Koska toinen elementti on läpinäkyvä, meidän täytyy nähdä tämän suorakulmion alapuoli, kuten näet vasemmassa esimerkissä. Se on hienovarainen, mutta sen pitäisi olla siellä!

Voimme lisätä gradientin pääelementtiin ja leikata sen kuten teimme pseudojen kanssa:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Tässä on koko koodi, kun kaikki on koottu:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

Se siitä! Käytimme vain älykästä tekniikkaa, joka käyttää pseudoelementtejä, kartiogradientteja, leikkausta, taustasekoitusta ja negatiivisia marginaaleja saadakseen yhden, vaan kaksi suloisen näköisiä 3D-lataajia, joissa on vain yksi elementti merkinnöissä.

Lisää 3D: tä

Voimme silti mennä pidemmälle ja simuloida äärettömän määrän 3D-kuutioita yhdellä elementillä – kyllä, se on mahdollista! Tässä on kuutioiden ruudukko:

Tätä demoa ja seuraavia demoja ei tueta Safarissa tätä kirjoitettaessa.

Hullua, eikö? Nyt luomme toistuvan kuvion kuutioista, jotka on tehty yhdestä elementistä… eikä myöskään pseudoja! En mene yksityiskohtiin käyttämästämme matematiikasta (siellä on hyvin tarkkoja lukuja), mutta tässä on kuva havainnollistamaan, kuinka olemme päässeet tähän:

Käytämme ensin a conic-gradient luodaksesi toistuvan kuutiokuvion. Kuvion toistoa ohjataan kolmella muuttujalla:

• --size: Nimensä mukaisesti tämä säätelee kunkin kuution kokoa.
• --m: Tämä edustaa sarakkeiden määrää.
• --n: Tämä on rivien määrä.
• --gap: tämä on kuutioiden välinen rako tai etäisyys

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Sitten levitämme maskikerroksen käyttämällä toista samankokoista kuviota. Tämä on tämän idean vaikein osa. Käyttämällä yhdistelmää a linear-gradient ja conic-gradient leikkaamme elementistämme muutaman osan, jotta vain kuution muodot pysyvät näkyvissä.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

Koodi saattaa näyttää hieman monimutkaiselta, mutta CSS-muuttujien ansiosta meidän tarvitsee vain päivittää muutama arvo hallitaksemme kuutiomatriisiamme. Tarvitsetko 10⨉10 ruudukon? Päivitä --m ja --n muuttujat 10. Tarvitsetko leveämmän raon kuutioiden väliin? Päivitä --gap arvo. Väriarvoja käytetään vain kerran, joten päivitä ne uutta väripalettia varten!

Nyt kun meillä on toinen 3D-tekniikka, rakennetaan sen avulla latauslaitteen muunnelmia leikkimällä eri animaatioilla. Entä esimerkiksi toistuva kuvio kuutioista, jotka liukuvat äärettömästi vasemmalta oikealle?

Tämä kuormaaja määrittää neljä kuutiota yhdelle riville. Se tarkoittaa meidän --n arvo on 4 ja --m on yhtä suuri kuin 1 . Toisin sanoen emme enää tarvitse näitä!

Sen sijaan voimme työskennellä --size ja --gap muuttujat ruudukkosäiliössä:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

Tämä on konttimme. Meillä on neljä kuutiota, mutta haluamme näyttää vain kolme säiliössä kerrallaan, jotta yksi liukuu aina sisään samalla kun toinen liukuu ulos. Siksi otamme leveyden huomioon 3 ja aseta kuvasuhteeksi 3 samoin.

Varmistetaan, että kuutiokuviomme on asetettu neljän kuution leveydelle. Teemme tämän säiliössä ::before pseudoelementti:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Nyt kun meillä on neljä kuutiota kolmen kuution säiliössä, voimme tasata kuutiokuvion ruudukon säiliön päähän, jotta se vuotaa sen yli näyttäen kolme viimeistä kuutiota:

.loader { /* same as before */ justify-content: end;
}

Tässä on mitä meillä on tähän mennessä, punaisella ääriviivalla, joka näyttää ruudukon säiliön rajat:

Nyt meidän tarvitsee vain siirtää pseudoelementti oikealle lisäämällä animaatiomme:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Ymmärsitkö animaation tempun? Lopetetaan tämä piilottamalla ylivuotava kuutiokuvio ja lisäämällä ripaus maskia luodaksesi sen häivyttävän vaikutelman, joka alkaa ja loppu:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Voimme tehdä tästä paljon joustavampaa ottamalla käyttöön muuttujan, --n, määrittääksesi kuinka monta kuutiota säiliössä näytetään kerralla. Ja koska kuvion kuutioiden kokonaismäärän pitäisi olla yksi enemmän kuin --n, voimme ilmaista sen muodossa calc(var(--n) + 1).

Tässä koko juttu:

OK, vielä yksi 3D-lataaja, joka on samanlainen, mutta jossa kuutiot vaihtavat väriä peräkkäin liukumisen sijaan:

Aiomme luottaa animoituun taustaan background-blend-mode tälle:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

Olen poistanut ylimääräisen koodin, jolla luotiin sama asettelu kuin edellisessä esimerkissä, mutta kolmella kuutiolla neljän sijasta. Lisään tähän gradientin, joka on määritetty tietyllä värillä, joka sekoittuu kartiomaisen gradientin kanssa, aivan kuten teimme aiemmin edistymispalkin 3D-lataimelle.

Sieltä se animoi taustagradientin background-position kolmivaiheisena animaationa, joka saa kuutiot vilkkumaan värejä yksi kerrallaan.

Jos et tunne arvoja, joihin käytän background-position ja taustasyntaksia, suosittelen yksi aiemmista artikkeleistani ja yksi Stack Overflow -vastaukseni. Sieltä löydät erittäin yksityiskohtaisen selityksen.

Voimmeko päivittää kuutioiden lukumäärän, jotta se muuttuisi?

Kyllä, minulla on a ratkaisu siihen, mutta haluaisin sinun perehtyvän siihen sen sijaan, että upottaisit sen tänne. Ota se, mitä olemme oppineet edellisestä esimerkistä, ja yritä tehdä sama tämän kanssa – jaa sitten työsi kommenteissa!

Variaatioita yllin kyllin!

Kuten tämän sarjan kolme muuta artikkelia, haluaisin antaa sinulle inspiraatiota mennä eteenpäin ja luoda omia kuormareita. Tässä on kokoelma, joka sisältää yhdessä tekemiämme 3D-lataajia sekä muutamia muita mielikuvituksesi käynnistämiseksi:

Se on kääre

Toivon todella, että nautit viettämästä aikaa yksielementtikuormaajien kanssani viime viikkoina. On hullua, että aloitimme näennäisesti yksinkertaisella spinnerillä ja sitten lisäsimme vähitellen uusia kappaleita työstämään itseämme aina 3D-tekniikoihin asti, jotka silti käyttävät vain yhtä elementtiä merkinnöissä. Juuri tältä CSS näyttää, kun hyödynnämme sen voimat: skaalautuva, joustava ja uudelleenkäytettävä.

Kiitos vielä kerran tämän pienen sarjan lukemisesta! Allekirjoitan pois muistuttamalla, että minulla on a yli 500 kuormaajan kokoelma jos etsit lisää ideoita ja inspiraatiota.

---

Single Element Loaders: Going 3D! 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-going-3d/