Ühe elemendiga laadurid: punktid

Vaatleme selle seeria laadureid. Veelgi enam, me võtame lahti mõned levinumad laadimismustrid ja kuidas neid uuesti luua, kasutades ainult ühte div. Siiani oleme lahku valinud klassikaline pöörlev laadur. Vaatame nüüd veel ühte, millest olete tõenäoliselt hästi teadlik: täpid.

Punktlaadurid on kõikjal. Need on kenad, sest koosnevad tavaliselt kolmest punktist, mis näevad välja nagu tekstikollips (…), mis tantsib ringi.

Meie eesmärk on teha see sama asi ühest div-elemendist. Teisisõnu, iga punkti kohta pole ühte div-d ega iga punkti jaoks eraldi animatsioone.

See ülaltoodud laadija näide on tehtud ühe div elemendiga, mõne CSS-deklaratsiooniga ja ilma pseudoelementideta. Kombineerin kahte tehnikat kasutades CSS-i background ja mask. Ja kui oleme valmis, näeme, kuidas taustagradiendi animeerimine aitab luua illusiooni, et iga punkt muudab järjestikku üles-alla liikudes värve.

Taustaanimatsioon

Alustame taustaanimatsiooniga:

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

Loodan, et see näeb üsna lihtne välja. See, mis meil on, on a 180pxkogu maailmas .loader element, mis näitab kahte koonusekujulist gradienti, millel on kõvad värvilised peatuskohad kahe värvi vahel – esimene gradient on punane ja sinine piki värvi ülemist poolt. .loader, ja teine ​​gradient on roheline ja lilla piki alumist poolt.

laadija tausta suuruse määramise viis (200% lai), näeme mõlemas pooles korraga ainult ühte neist värvidest. Siis on meil see väike animatsioon, mis nihutab nende taustagradientide asukohta igavesti ja igavesti vasakule, paremale ja tagasi.

Taustaomadustega tegelemisel — eriti background-position — Ma viitan alati oma Stack Overflow vastus, kus annan üksikasjaliku selgituse kuidas see kõik toimib. Kui teile ei meeldi CSS-i taustapettused, soovitan tungivalt seda vastust lugeda, et aidata järgmiseks.

Animatsioonis pange tähele, et esimene kiht on Y=0% (asetatud üleval) samas X muutub alates 0% et 100%. Teise kihi jaoks on meil sama X kuid Y=100% (paigutatud allosas).

Miks kasutada a conic-gradient() asemel linear-gradient()?

Hea küsimus! Intuitiivselt peaksime kahevärviliste gradientide loomiseks kasutama lineaarset gradienti, nagu see:

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

Kuid me võime jõuda samani ka kasutades a conic-gradient() — ja vähema koodiga. Vähendame koodi ja õpime selle käigus ka uue nipi!

Värvide libistamine vasakule ja paremale on hea viis jätta mulje, nagu muudaksime värve, kuid võib-olla oleks parem, kui muudaksime selle asemel koheselt värve – nii ei ole mingit võimalust, et laadurpunkt vilguks korraga kahte värvi. . Selleks muutkem animationajastusfunktsioon alates linear et steps(1)

Laadija punktid

Kui järgisite koos esimene artikkel selles sarjas, Vean kihla, et tead, mis järgmiseks tuleb: CSS maskid! Maskid teeb suurepäraseks see, et nad lasevad meil omamoodi "lõigake välja" osad taustast teise elemendi kujul. Seega tahame antud juhul teha mõned punktid, näidata tausta gradiente läbi punktide ja lõigata välja kõik osad taustast, mis ei ole punkti osa.

Me hakkame kasutama radial-gradient() selle jaoks:

.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 */
}

Seal on dubleeritud kood, nii et teeme asjade vähendamiseks CSS-i muutuja:

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

Lahe lahe. Kuid nüüd vajame uut animatsiooni, mis aitab animeeritud gradientide vahel punkte üles-alla liigutada.

.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 */
}

Jah, see on kokku kolm radiaalset gradienti, mis kõik on sama konfiguratsiooniga ja sama suurusega – animatsioon värskendab igaühe asukohta. Pange tähele, et X iga punkti koordinaat on fikseeritud. The mask-position on määratletud nii, et esimene punkt on vasakul (0%), teine ​​keskel (50%) ja kolmas paremal (100%). Uuendame ainult Y koordinaat 0% et 100% et täpid tantsiksid.

Siin on see, mida me saame:

Nüüd ühendage see meie gradiendi animatsiooniga ja maagia hakkab juhtuma:

Punktlaaduri variatsioonid

Viimases näites tehtud CSS-muutuja muudab uute värvide vahetamise ja sama laadija rohkemate variatsioonide loomise palju lihtsamaks. Näiteks erinevad värvid ja suurused:

Kuidas on lood meie punktide teise liikumisega?

Siin värskendasin ainult animatsiooni, et arvestada erinevate positsioonidega, ja saame teise sama koodistruktuuriga laadija!

Animatsioonitehnikat, mida kasutasin maskikihtide jaoks, saab kasutada ka taustakihtidega, et luua palju erinevaid ühevärvilisi laadureid. Kirjutasin selle kohta üksikasjaliku artikli. Näete, et samast koodistruktuurist saame luua erinevaid variatsioone, muutes lihtsalt mõnda väärtust. Jagan mõned näited artikli lõpus.

Miks mitte ühe punktiga laadur?

Seda peaks olema üsna lihtne kasutada, kuna kasutan sama tehnikat, kuid lihtsama loogikaga:

Siin on veel üks näide laadurist, kus ma ka animeerin radial-gradient koos CSS filtrid ja mix-blend-mode laigulise efekti loomiseks:

Kui kontrollite koodi, näete, et kõik, mida ma seal tegelikult teen, on selle animeerimine background-position, täpselt nagu tegime eelmise laaduriga, kuid lisades kriipsu background-size et täppide neelamisel jääks mulje, et plekk muutub suuremaks.

Kui soovite mõista selle laiguefekti võlu, võite viidata sellele need interaktiivsed slaidid (ainult Chrome) autor Ana Tudor sest ta katab seda teemat nii hästi!

Siin on veel üks punktlaaduri idee, seekord teistsugust tehnikat kasutades:

See on ainult 10 CSS-deklaratsiooni ja võtmekaader. Põhielemendil ja selle kahel pseudoelemendil on sama taustakonfiguratsioon ühe radiaalse gradiendiga. Igaüks neist loob ühe punkti, kokku kolm. Animatsioon liigutab gradienti ülalt alla, kasutades iga punkti jaoks erinevaid viivitusi.

Oh, ja pange tähele, kuidas see demo kasutab CSS-võrku. See võimaldab meil kasutada võrgu vaikeseadet stretch joondus nii, et mõlemad pseudoelemendid katavad kogu oma vanema ala. Pole vaja suurust määrata! Suruge veidi ümber translate() ja kõik on valmis.

Veel näiteid!

Lihtsalt selleks, et punkt koju viia, tahan teile jätta hunniku täiendavaid näiteid, mis on tegelikult vaadeldud variatsioonid. Demosid vaadates näete, et siin käsitletud lähenemisviisid on ülipaindlikud ja avavad palju disainivõimalusi.

Järgmisena…

OK, seega käsitlesime selles artiklis punktlaadureid ja viimases spinnereid. Selle neljaosalise seeria järgmises artiklis pöörame tähelepanu teisele levinud laaduritüübile: baarid. Kasutame palju seni õpitut ja vaatame, kuidas saaksime neid laiendada, et luua veel üks üheelemendiline laadija, millel on võimalikult vähe koodi ja nii palju paindlikkust.

---

Ühe elemendiga laadurid: punktid 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-dots/