Yksiosaiset kuormaajat: Pisteet

Tarkastelemme tämän sarjan kuormaajia. Lisäksi erotamme joitain yleisiä latausmalleja ja kuinka voit luoda ne uudelleen vain yhdellä div:llä. Toistaiseksi olemme eronneet klassinen kehruukuormaaja. Katsotaanpa nyt toista, jonka olet todennäköisesti hyvin tietoinen: pisteet.

Pistekuormaajia on kaikkialla. Ne ovat siistejä, koska ne koostuvat yleensä kolmesta pisteestä, jotka näyttävät ikään kuin tekstiellipsiltä (…), joka tanssii ympäriinsä.

Tavoitteemme on tehdä tämä sama asia yhdestä div-elementistä. Toisin sanoen ei ole yhtä div per piste tai yksittäisiä animaatioita jokaiselle pisteelle.

Yllä oleva esimerkki lataajasta on tehty yhdellä div-elementillä, muutamalla CSS-ilmoituksella ja ilman pseudoelementtejä. Yhdistelen kahta tekniikkaa CSS:n avulla background ja mask. Ja kun olemme valmis, näemme, kuinka taustagradientin animointi auttaa luomaan illuusion siitä, että jokainen piste muuttaa väriä, kun ne liikkuvat ylös ja alas peräkkäin.

Taustaanimaatio

Aloitetaan taustaanimaatiosta:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Toivottavasti tämä näyttää melko suoraviivaiselta. Se mitä meillä on, on a 180pxlaajuinen .loader elementti, joka näyttää kaksi kartiomaista gradienttia, joissa on kova väripysähdys kahden värin välillä – ensimmäinen kaltevuus on punainen ja sininen yläosassa .loader, ja toinen kaltevuus on vihreä ja violetti alaosassa.

Lataajan taustan koko (200% leveä), näemme vain yhden näistä väreistä jokaisessa puolikkaassa kerrallaan. Sitten meillä on tämä pieni animaatio, joka siirtää noiden taustagradienttien sijaintia vasemmalle, oikealle ja takaisin aina ja ikuisesti.

Käsiteltäessä taustaominaisuuksia - varsinkin background-position – Viittaan aina omaan Stack Overflow -vastaus, jossa annan yksityiskohtaisen selityksen miten tämä kaikki toimii. Jos et pidä CSS-taustahuijauksesta, suosittelen lämpimästi tämän vastauksen lukemista, jotta saat apua seuraavaksi.

Animaatiossa huomaa, että ensimmäinen kerros on Y=0% (sijoitettu yläosaan) samalla X on muuttunut 0% että 100%. Toiselle kerrokselle meillä on sama X mutta Y=100% (sijoitetaan alaosaan).

Miksi käyttää a conic-gradient() sijasta linear-gradient()?

Hyvä kysymys! Intuitiivisesti meidän pitäisi käyttää lineaarista gradienttia luodaksesi kaksiväriset gradientit, kuten tämä:

linear-gradient(90deg, red 50%, blue 0)

Mutta voimme saavuttaa saman myös käyttämällä a conic-gradient() - ja vähemmän koodia. Vähennämme koodia ja opimme samalla uuden tempun!

Värien liu'uttaminen vasemmalle ja oikealle on mukava tapa saada se näyttämään siltä, ​​että vaihdamme värejä, mutta voisi olla parempi, jos vaihdamme sen sijaan värejä välittömästi – näin ei ole mahdollisuutta, että latauspiste vilkkuu kahta väriä samanaikaisesti. . Tätä varten muutetaan animationn ajastustoiminto alkaen linear että steps(1)

Latauspisteitä

Jos seurasit mukana ensimmäinen artikkeli tässä sarjassa, Lyön vetoa, että tiedät mitä seuraavaksi: CSS-naamarit! Naamioista niin mahtavia tekee se, että ne antavat meidän tavallaan "leikkaa" osia taustasta toisen elementin muodossa. Joten tässä tapauksessa haluamme tehdä muutaman pisteen, näyttää taustagradientit pisteiden läpi ja leikata taustasta kaikki osat, jotka eivät ole osa pistettä.

Aiomme käyttää radial-gradient() tätä varten:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Siinä on kopioitua koodia, joten tehdään CSS-muuttuja asioiden pienentämiseksi:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Siistiä, siistiä. Mutta nyt tarvitsemme uuden animaation, joka auttaa siirtämään pisteitä ylös ja alas animoitujen liukuvärien välillä.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Kyllä, siinä on yhteensä kolme säteittäistä gradienttia, joilla kaikilla on sama kokoonpano ja sama koko – animaatio päivittää kunkin sijainnin. Huomaa, että X kunkin pisteen koordinaatti on kiinteä. The mask-position on määritelty siten, että ensimmäinen piste on vasemmalla (0%), toinen keskellä (50%), ja kolmas oikealla (100%). Päivitämme vain Y koordinaatista 0% että 100% saada pisteet tanssimaan.

Tässä on mitä saamme:

Yhdistä tämä kaltevuusanimaatioihimme ja taikuutta alkaa tapahtua:

Pistelataajan muunnelmia

Edellisessä esimerkissä tekemämme CSS-muuttuja helpottaa uusien värien vaihtamista ja useamman muunnelman luomista samasta lataajasta. Esimerkiksi eri värejä ja kokoja:

Entä toinen liike pisteillemme?

Tässä tein vain päivittämisen animaation huomioimaan eri asennot, ja saamme toisen latausohjelman, jolla on sama koodirakenne!

Maskikerroksissa käyttämäni animaatiotekniikkaa voidaan käyttää myös taustakerrosten kanssa luomaan paljon erilaisia ​​yhdellä värillä varustettuja latauslaitteita. Kirjoitin tästä yksityiskohtaisen artikkelin. Näet, että samasta koodirakenteesta voimme luoda erilaisia ​​muunnelmia yksinkertaisesti muuttamalla muutamia arvoja. Kerron muutaman esimerkin artikkelin lopussa.

Miksei kuormaaja yhdellä pisteellä?

Tämän pitäisi olla melko helppoa, koska käytän samaa tekniikkaa, mutta yksinkertaisemmalla logiikalla:

Tässä on toinen esimerkki loaderista, jossa myös animoin radial-gradient yhdistettynä CSS-suodattimet ja mix-blend-mode blobb-efektin luominen:

Jos tarkistat koodin, huomaat, että teen siellä vain animoinnin background-position, aivan kuten teimme edellisen latausohjelman kanssa, mutta lisäämällä viiva background-size jotta se näyttäisi siltä, ​​että läiskä kasvaa, kun se imee pisteitä.

Jos haluat ymmärtää möykkyefektin takana olevan taikuuden, voit viitata siihen näitä interaktiivisia dioja (vain Chrome) kirjoittaja Ana Tudor koska hän käsittelee aihetta niin hyvin!

Tässä on toinen pistelatausidea, tällä kertaa eri tekniikalla:

Tämä on vain 10 CSS-ilmoitusta ja avainkehys. Pääelementillä ja sen kahdella pseudoelementillä on sama taustakonfiguraatio yhdellä säteittäisellä gradientilla. Jokainen luo yhden pisteen, yhteensä kolme. Animaatio siirtää gradientin ylhäältä alas käyttämällä eri viiveitä jokaiselle pisteelle.

Ja huomioi, kuinka tämä demo käyttää CSS Gridiä. Tämä antaa meille mahdollisuuden hyödyntää ruudukon oletusarvoa stretch kohdistaminen siten, että molemmat pseudoelementit kattavat koko vanhemman alueen. Mitoitusta ei tarvita! Työnnä ympäriä hieman translate() ja olemme valmiita.

Lisää esimerkkejä!

Haluan vain viedä asian kotiin, ja haluan jättää sinulle joukon lisäesimerkkejä, jotka ovat todellisia muunnelmia siitä, mitä olemme tarkastelleet. Kun katselet demoja, huomaat, että tässä käsitellyt lähestymistavat ovat erittäin joustavia ja tarjoavat paljon suunnittelumahdollisuuksia.

Seuraava…

Okei, joten käsittelimme tässä artikkelissa pistekuormaajia ja viimeisessä artikkelissa spinneriä. Tämän neliosaisen sarjan seuraavassa artikkelissa kiinnitämme huomiomme toiseen yleiseen kuormaajatyyppiin: baarit. Otamme paljon tähän mennessä oppimiamme ja katsomme, kuinka voimme laajentaa niitä luodaksemme vielä yhden elementin latausohjelman, jossa on mahdollisimman vähän koodia ja mahdollisimman paljon joustavuutta.

---

Yksiosaiset kuormaajat: Pisteet 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-dots/