Single Element Loaders: The Dots

Vi kigger på læssere i denne serie. Mere end det, vi nedbryder nogle almindelige loader-mønstre, og hvordan man genskaber dem med intet mere end en enkelt div. Indtil videre har vi skilt os ad den klassiske roterende læsser. Lad os nu se på en anden, som du sandsynligvis er godt klar over: prikkerne.

Dot loaders er overalt. De er pæne, fordi de normalt består af tre prikker, der ligner en tekstellipse (...), der danser rundt.

Vores mål her er at lave den samme ting ud af et enkelt div-element. Med andre ord er der ingen div pr. prik eller individuelle animationer for hver prik.

Dette eksempel på en loader ovenfor er lavet med et enkelt div-element, et par CSS-erklæringer og ingen pseudo-elementer. Jeg kombinerer to teknikker ved hjælp af CSS background , mask. Og når vi er færdige, vil vi se, hvordan animation af en baggrundsgradient hjælper med at skabe illusionen af, at hver prik skifter farver, når de bevæger sig op og ned i rækkefølge.

Baggrundsanimationen

Lad os starte med baggrundsanimationen:

.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åber, det ser ret ligetil ud. Det vi har er en 180px-bred .loader element, der viser to koniske gradienter med hårde farvestop mellem to farver hver — den første gradient er rød og blå langs den øverste halvdel af .loader, og den anden gradient er grøn og lilla langs den nederste halvdel.

Den måde, hvorpå læsserens baggrund er dimensioneret (200% bred), ser vi kun én af disse farver i hver halvdel ad gangen. Så har vi denne lille animation, der skubber positionen af ​​disse baggrundsgradienter til venstre, højre og tilbage igen for evigt og altid.

Når man beskæftiger sig med baggrundsegenskaber - især background-position — Jeg henviser altid til min Stack Overflow svar, hvor jeg giver en detaljeret forklaring om hvordan alt dette fungerer. Hvis du er utilpas med CSS-baggrundstrickeri, anbefaler jeg stærkt at læse det svar for at hjælpe med, hvad der kommer næste gang.

I animationen skal du bemærke, at det første lag er Y=0% (placeret øverst) mens X er ændringer fra 0% til 100%. For det andet lag har vi det samme til X men Y=100% (placeret nederst).

Hvorfor bruge en conic-gradient() i stedet for linear-gradient()?

Godt spørgsmål! Intuitivt bør vi bruge en lineær gradient til at skabe tofarvede gradienter som dette:

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

Men vi kan også nå det samme ved hjælp af en conic-gradient() - og med mindre kode. Vi reducerer koden og lærer også et nyt trick i processen!

At skyde farverne til venstre og højre er en god måde at få det til at se ud som om vi skifter farver, men det kan være bedre, hvis vi øjeblikkeligt skifter farver i stedet for - på den måde er der ingen chance for, at en loader-prik blinker to farver på samme tid . For at gøre dette, lad os ændre animation's timing funktion fra linear til steps(1)

Læsseren prikker

Hvis du fulgte med første artikel i denne serie, jeg vil vædde på, at du ved, hvad der kommer næste gang: CSS masker! Det, der gør masker så gode, er, at de lader os sådan set "klippe ud" dele af en baggrund i form af et andet element. Så i dette tilfælde vil vi lave et par prikker, vise baggrundsgradienterne gennem prikkerne og skære alle dele af baggrunden ud, som ikke er en del af en prik.

Vi skal bruge radial-gradient() for det:

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

Der er noget duplikeret kode derinde, så lad os lave en CSS-variabel for at slanke tingene:

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

Sejt sejt. Men nu har vi brug for en ny animation, der hjælper med at flytte prikkerne op og ned mellem de animerede gradienter.

.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 i alt tre radiale gradienter derinde, alle med samme konfiguration og samme størrelse - animationen vil opdatere hver enkelts position. Bemærk, at X koordinaten for hver prik er fast. Det mask-position er defineret sådan, at den første prik er til venstre (0%), den anden i midten (50%), og den tredje til højre (100%). Vi opdaterer kun Y koordinere fra 0% til 100% at få prikkerne til at danse.

Her er hvad vi får:

Kombiner nu dette med vores gradient-animation, og magien begynder at ske:

Dot loader variationer

CSS-variablen, vi lavede i det sidste eksempel, gør det så meget nemmere at bytte i nye farver og skabe flere variationer af den samme læsser. For eksempel forskellige farver og størrelser:

Hvad med endnu en bevægelse for vores prikker?

Her var alt, hvad jeg gjorde, at opdatere animationen for at overveje forskellige positioner, og vi får en anden loader med den samme kodestruktur!

Animationsteknikken, jeg brugte til maskelagene, kan også bruges med baggrundslag til at skabe en masse forskellige loadere med en enkelt farve. Jeg skrev en detaljeret artikel om dette. Du vil se, at vi fra den samme kodestruktur kan skabe forskellige variationer ved blot at ændre nogle få værdier. Jeg deler et par eksempler i slutningen af ​​artiklen.

Hvorfor ikke en læsser med én prik?

Denne burde være ret nem at grok, da jeg bruger den samme teknik, men med en mere enkel logik:

Her er endnu et eksempel på loader, hvor jeg også animerer radial-gradient kombineret med CSS-filtre , mix-blend-mode for at skabe en blobby-effekt:

Hvis du tjekker koden, vil du se, at alt, hvad jeg virkelig gør der, er at animere background-position, nøjagtig som vi gjorde med den forrige læsser, men tilføjede et strejf af background-size for at få det til at se ud som om klatten bliver større, efterhånden som den absorberer prikker.

Hvis du vil forstå magien bag den klateffekt, kan du henvise til disse interaktive dias (kun Chrome) af Ana Tudor fordi hun dækker emnet så godt!

Her er en anden idé til dot loader, denne gang ved hjælp af en anden teknik:

Denne er kun 10 CSS-deklarationer og en keyframe. Hovedelementet og dets to pseudo-elementer har den samme baggrundskonfiguration med en radial gradient. Hver enkelt opretter en prik, i alt tre. Animationen flytter gradienten fra top til bund ved at bruge forskellige forsinkelser for hver prik.

Åh, og læg mærke til, hvordan denne demo bruger CSS Grid. Dette giver os mulighed for at udnytte nettets standard stretch justering, så begge pseudo-elementer dækker hele området af deres forælder. Intet behov for dimensionering! Skub lidt rundt med translate() og vi er klar.

Flere eksempler!

Bare for at bringe pointen hjem, vil jeg efterlade dig med en masse yderligere eksempler, der virkelig er variationer af det, vi har set på. Når du ser demoerne, vil du se, at de tilgange, vi har dækket her, er super fleksible og åbner op for tonsvis af designmuligheder.

Næste...

OK, så vi dækkede dot loaders i denne artikel og spinners i den sidste. I den næste artikel i denne firedelte serie vil vi vende vores opmærksomhed mod en anden almindelig type læsser: stængerne. Vi vil tage meget af det, vi har lært indtil nu, og se, hvordan vi kan udvide dem til at skabe endnu en enkelt elementindlæser med så lidt kode og så meget fleksibilitet som muligt.

---

Single Element Loaders: The Dots oprindeligt udgivet den CSS-tricks. Du burde få nyhedsbrevet.

• Coinsmart. Europas bedste Bitcoin og Crypto Exchange.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. FRI ADGANG.
• CryptoHawk. Altcoin radar. Gratis prøveversion.
• Kilde: https://css-tricks.com/single-element-loaders-the-dots/