Single Element Loaders: The Dots

Vi ser på lastere i denne serien. Mer enn det, vi bryter ned noen vanlige lastermønstre og hvordan du kan gjenskape dem uten mer enn en enkelt div. Så langt har vi skilt fra hverandre den klassiske spinnelasteren. La oss nå se på en annen du sannsynligvis er godt klar over: prikkene.

Dot loaders er over alt. De er pene fordi de vanligvis består av tre prikker som på en måte ser ut som en tekstellipsis (...) som danser rundt.

Målet vårt her er å lage den samme tingen av et enkelt div-element. Med andre ord er det ingen div per prikk eller individuelle animasjoner for hver prikk.

Dette eksemplet på en laster ovenfor er laget med et enkelt div-element, noen få CSS-deklarasjoner og ingen pseudo-elementer. Jeg kombinerer to teknikker ved å bruke CSS background og mask. Og når vi er ferdige, vil vi se hvordan animering av en bakgrunnsgradient bidrar til å skape en illusjon av at hver prikk endrer farger når de beveger seg opp og ned etter hverandre.

Bakgrunnsanimasjonen

La oss starte med bakgrunnsanimasjonen:

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

Jeg håper dette ser ganske enkelt ut. Det vi har er en 180px-bred .loader element som viser to koniske gradienter med harde fargestopp mellom to farger hver — den første gradienten er rød og blå langs den øvre halvdelen av .loader, og den andre gradienten er grønn og lilla langs den nederste halvdelen.

Måten lasterens bakgrunn er dimensjonert på (200% bred), ser vi bare én av disse fargene i hver halvdel om gangen. Så har vi denne lille animasjonen som skyver posisjonen til disse bakgrunnsgradientene til venstre, høyre og tilbake igjen for alltid og alltid.

Når du arbeider med bakgrunnsegenskaper - spesielt background-position — Jeg referer alltid til min Stack Overflow-svar hvor jeg gir en detaljert forklaring om hvordan alt dette fungerer. Hvis du er ukomfortabel med CSS-bakgrunnslureri, anbefaler jeg på det sterkeste å lese det svaret for å hjelpe med hva som kommer videre.

Legg merke til at det første laget er i animasjonen Y=0% (plassert øverst) mens X er endringer fra 0% til 100%. For det andre laget har vi det samme for X men Y=100% (plassert nederst).

Hvorfor bruke en conic-gradient() istedenfor linear-gradient()?

Godt spørsmål! Intuitivt bør vi bruke en lineær gradient for å lage tofargede gradienter som dette:

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

Men vi kan også strekke oss etter det samme ved å bruke en conic-gradient() – og med mindre kode. Vi reduserer koden og lærer også et nytt triks i prosessen!

Å skyve fargene til venstre og høyre er en fin måte å få det til å se ut som om vi skifter farger, men det kan være bedre om vi umiddelbart endrer farger i stedet – på den måten er det ingen sjanse for at en laster-prik blinker to farger samtidig . For å gjøre dette, la oss endre animationsin tidsfunksjon fra linear til steps(1)

Lasteren prikker

Hvis du fulgte med første artikkel i denne serien, jeg vedder på at du vet hva som kommer videre: CSS-masker! Det som gjør masker så flotte er at de lar oss liksom "klipp ut" deler av en bakgrunn i form av et annet element. Så i dette tilfellet ønsker vi å lage noen få prikker, vise bakgrunnsgradientene gjennom prikkene og kutte ut eventuelle deler av bakgrunnen som ikke er en del av en prikk.

Vi skal bruke radial-gradient() for dette:

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

Det er noe duplisert kode der inne, så la oss lage en CSS-variabel for å slanke ting:

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

Kult kult. Men nå trenger vi en ny animasjon som hjelper til med å flytte prikkene opp og ned mellom de animerte gradientene.

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

Ja, det er totalt tre radielle gradienter der inne, alle med samme konfigurasjon og samme størrelse - animasjonen vil oppdatere posisjonen til hver enkelt. Merk at X koordinaten til hver prikk er fast. De mask-position er definert slik at den første prikken er til venstre (0%), den andre i midten (50%), og den tredje til høyre (100%). Vi oppdaterer kun Y koordinere fra 0% til 100% å få prikkene til å danse.

Her er hva vi får:

Nå, kombiner dette med gradientanimasjonen vår og magien begynner å skje:

Dot loader variasjoner

CSS-variabelen vi laget i det siste eksemplet gjør det så mye enklere å bytte inn nye farger og lage flere varianter av samme laster. For eksempel forskjellige farger og størrelser:

Hva med en annen bevegelse for våre prikker?

Her var alt jeg gjorde var å oppdatere animasjonen for å vurdere forskjellige posisjoner, og vi får en annen laster med samme kodestruktur!

Animasjonsteknikken jeg brukte for maskelagene kan også brukes med bakgrunnslag for å lage mange forskjellige lastere med en enkelt farge. Jeg skrev en detaljert artikkel om dette. Du vil se at fra den samme kodestrukturen kan vi lage forskjellige varianter ved ganske enkelt å endre noen få verdier. Jeg deler noen eksempler på slutten av artikkelen.

Hvorfor ikke en laster med én prikk?

Denne burde være ganske enkel å grok siden jeg bruker samme teknikk, men med en enklere logikk:

Her er et annet eksempel på loader hvor jeg også animerer radial-gradient kombinert med CSS-filtre og mix-blend-mode for å lage en blobby-effekt:

Hvis du sjekker koden, vil du se at alt jeg egentlig gjør der er å animere background-position, akkurat som vi gjorde med den forrige lasteren, men legger til en dash av background-size for å få det til å se ut som klatten blir større ettersom den absorberer prikker.

Hvis du vil forstå magien bak den klumpeffekten, kan du henvise til disse interaktive lysbildene (bare Chrome) av Ana Tudor fordi hun dekker temaet så godt!

Her er en annen ide for punktlaster, denne gangen med en annen teknikk:

Denne er bare 10 CSS-deklarasjoner og en nøkkelramme. Hovedelementet og dets to pseudoelementer har samme bakgrunnskonfigurasjon med en radiell gradient. Hver enkelt lager én prikk, totalt tre. Animasjonen flytter gradienten fra topp til bunn ved å bruke forskjellige forsinkelser for hver prikk.

Å, og legg merke til hvordan denne demoen bruker CSS Grid. Dette lar oss utnytte rutenettets standard stretch justering slik at begge pseudoelementene dekker hele området til foreldrene. Ingen behov for dimensjonering! Skyv litt rundt med translate() og vi er klare.

Flere eksempler!

Bare for å drive poenget hjem, vil jeg gi deg en haug med flere eksempler som virkelig er variasjoner av det vi har sett på. Når du ser på demoene, vil du se at tilnærmingene vi har dekket her er superfleksible og åpner for mange designmuligheter.

Neste…

OK, så vi dekket dot loaders i denne artikkelen og spinnere i den siste. I den neste artikkelen i denne firedelte serien vil vi rette oppmerksomheten mot en annen vanlig type laster: barene. Vi skal ta mye av det vi har lært så langt og se hvordan vi kan utvide dem til å lage enda en enkeltelementlaster med så lite kode og så mye fleksibilitet som mulig.

---

Single Element Loaders: The Dots opprinnelig publisert på CSS-triks. Du burde få nyhetsbrevet.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://css-tricks.com/single-element-loaders-the-dots/