Single Element Loaders: The Dots

Vi tittar på lastare i den här serien. Mer än det, vi bryter ner några vanliga lastarmönster och hur man återskapar dem med inget mer än en enda div. Hittills har vi plockat isär den klassiska snurrande lastaren. Låt oss nu titta på en annan som du förmodligen är väl medveten om: prickarna.

Dot loaders finns överallt. De är snygga eftersom de vanligtvis består av tre prickar som ser ut som en textellips (...) som dansar runt.

Vårt mål här är att göra samma sak av ett enda div-element. Med andra ord finns det ingen div per punkt eller individuella animationer för varje punkt.

Det här exemplet på en laddare ovan är gjort med ett enda div-element, några CSS-deklarationer och inga pseudo-element. Jag kombinerar två tekniker med CSS background och mask. Och när vi är klara kommer vi att se hur animering av en bakgrundsgradient hjälper till att skapa illusionen av att varje prick ändrar färger när de rör sig upp och ner i följd.

Bakgrundsanimationen

Låt oss börja med bakgrundsanimationen:

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

Jag hoppas att detta ser ganska okomplicerat ut. Vad vi har är en 180px-bred .loader element som visar två koniska gradienter med hårda färgstopp mellan två färger vardera — den första gradienten är röd och blå längs den övre halvan av .loader, och den andra gradienten är grön och lila längs den nedre halvan.

Storleken på lastarens bakgrund (200% bred), ser vi bara en av dessa färger i varje halva åt gången. Sedan har vi den här lilla animationen som skjuter positionen för dessa bakgrundsgradienter åt vänster, höger och tillbaka igen för alltid.

När det gäller bakgrundsegenskaper - speciellt background-position — Jag hänvisar alltid till min Stack Overflow svar där jag ger en detaljerad förklaring om hur allt detta fungerar. Om du är obekväm med CSS-bakgrundstrickery, rekommenderar jag starkt att du läser det svaret för att hjälpa dig med vad som kommer härnäst.

Lägg märke till att det första lagret är i animeringen Y=0% (placerad överst) medan X är förändringar från 0% till 100%. För det andra lagret har vi samma för X men Y=100% (placerad längst ner).

Varför använder man en conic-gradient() istället för linear-gradient()?

Bra fråga! Intuitivt bör vi använda en linjär gradient för att skapa en tvåfärgsgradient så här:

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

Men vi kan också nå detsamma med hjälp av en conic-gradient() — och med mindre kod. Vi minskar koden och lär oss även ett nytt knep i processen!

Att skjuta färgerna åt vänster och höger är ett trevligt sätt att få det att se ut som om vi byter färg, men det kan vara bättre om vi omedelbart byter färg istället - på så sätt finns det ingen chans att en lastprick blinkar två färger samtidigt . För att göra detta, låt oss ändra animations tidsfunktion från linear till steps(1)

Lastaren prickar

Om du följde med första artikeln i denna serie, jag slår vad om att du vet vad som kommer härnäst: CSS-masker! Det som gör masker så bra är att de låter oss liksom "klipp ut" delar av en bakgrund i form av ett annat element. Så i det här fallet vill vi göra några punkter, visa bakgrundsgradienterna genom prickarna och skära ut alla delar av bakgrunden som inte är en del av en prick.

Vi ska använda radial-gradient() för detta:

.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 finns en del duplicerad kod där, så låt oss göra en CSS-variabel för att banta saker:

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

Coolt coolt. Men nu behöver vi en ny animering som hjälper till att flytta prickarna upp och ner mellan de animerade gradienterna.

.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 är totalt tre radiella gradienter där, alla med samma konfiguration och samma storlek - animeringen kommer att uppdatera positionen för var och en. Observera att X koordinaten för varje punkt är fast. De mask-position definieras så att den första punkten är till vänster (0%), den andra i mitten (50%), och den tredje till höger (100%). Vi uppdaterar bara Y koordinera från 0% till 100% att få prickarna att dansa.

Här är vad vi får:

Kombinera nu detta med vår gradientanimation och magi börjar hända:

Dot loader variationer

CSS-variabeln vi gjorde i det förra exemplet gör det så mycket lättare att byta i nya färger och skapa fler varianter av samma laddare. Till exempel olika färger och storlekar:

Vad sägs om en annan rörelse för våra prickar?

Här var allt jag gjorde var att uppdatera animationen för att överväga olika positioner, och vi får en annan laddare med samma kodstruktur!

Animationstekniken jag använde för masklagren kan även användas med bakgrundslager för att skapa många olika laddare med en enda färg. Jag skrev en detaljerad artikel om detta. Du kommer att se att från samma kodstruktur kan vi skapa olika varianter genom att helt enkelt ändra några värden. Jag delar med mig av några exempel i slutet av artikeln.

Varför inte en lastare med en prick?

Den här borde vara ganska lätt att groka eftersom jag använder samma teknik men med en enklare logik:

Här är ett annat exempel på loader där jag också animerar radial-gradient kombineras med CSS-filter och mix-blend-mode för att skapa en blobbyeffekt:

Om du kontrollerar koden kommer du att se att allt jag verkligen gör där är att animera background-position, precis som vi gjorde med den tidigare lastaren, men lägger till en skvätt background-size för att få det att se ut som att klumpen blir större när den absorberar prickar.

Om du vill förstå magin bakom den där blobeffekten kan du hänvisa till dessa interaktiva bilder (endast Chrome) av Ana Tudor för hon täcker ämnet så bra!

Här är en annan idé för punktladdare, den här gången med en annan teknik:

Den här är bara 10 CSS-deklarationer och en nyckelbildruta. Huvudelementet och dess två pseudoelement har samma bakgrundskonfiguration med en radiell gradient. Var och en skapar en prick, totalt tre. Animationen flyttar gradienten från topp till botten genom att använda olika fördröjningar för varje punkt.

Åh, och notera hur denna demo använder CSS Grid. Detta gör att vi kan utnyttja rutnätets standard stretch anpassning så att båda pseudoelementen täcker hela området för sin förälder. Inget behov av storlek! Skjut runt lite med translate() och vi är alla redo.

Fler exempel!

Bara för att driva poängen hem vill jag lämna er med ett gäng ytterligare exempel som verkligen är varianter av vad vi har tittat på. När du tittar på demos kommer du att se att tillvägagångssätten vi har täckt här är superflexibla och öppnar upp massor av designmöjligheter.

Nästa...

OK, så vi behandlade dot loaders i den här artikeln och spinners i den förra. I nästa artikel i denna fyradelade serie kommer vi att rikta vår uppmärksamhet mot en annan vanlig typ av lastare: barerna. Vi kommer att ta mycket av det vi lärt oss hittills och se hur vi kan utöka dem till att skapa ännu en enstaka elementladdare med så lite kod och så mycket flexibilitet som möjligt.

---

Single Element Loaders: The Dots ursprungligen publicerad på CSS-tricks. Du borde få nyhetsbrevet.

• Myntsmart. Europas bästa bitcoin- och kryptobörs.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. FRI TILLGÅNG.
• CryptoHawk. Altcoin radar. Gratis provperiod.
• Källa: https://css-tricks.com/single-element-loaders-the-dots/