Single Element Loaders: The Spinner

At lave CSS-only loaders er en af ​​mine yndlingsopgaver. Det er altid tilfredsstillende at se på de uendelige animationer. Og det er der selvfølgelig masser af teknikker og tilgange til at lave dem - ingen grund til se længere end CodePen for at se hvor mange. I denne artikel vil vi dog se, hvordan man får en enkelt elementindlæser til at skrive så lidt kode som muligt.

Jeg har lavet en samling på mere end 500 enkelt div læssere og i denne firedelte serie vil jeg dele de tricks, jeg brugte til at lave mange af dem. Vi vil dække et stort antal eksempler, der viser, hvordan små justeringer kan føre til sjove variationer, og hvor lidt kode vi skal skrive for at få det hele til at ske!

Til denne første artikel vil vi skabe et af de mere almindelige læssermønstre: roterende stænger:

Her er tilgangen

En triviel implementering for denne indlæser er at skabe et element for hver stang pakket inde i et overordnet element (for ni elementer i alt), og derefter lege med opacity , transform for at få snurrende effekt.

Min implementering kræver dog kun ét element:

<div class="loader"></div>

…og 10 CSS-erklæringer:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Lad os bryde det ned

Ved første øjekast kan koden se mærkelig ud, men du vil se, at den er mere enkel, end du måske tror. Det første trin er at definere elementets dimension. I vores tilfælde er det en 150px firkant. Vi kan sætte aspect-ratio at bruge, så elementet forbliver firkantet uanset hvad.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Når jeg bygger CSS-læssere, forsøger jeg altid at have én værdi til at kontrollere den samlede størrelse. I dette tilfælde er det width og alle de beregninger, vi dækker, vil referere til den værdi. Dette giver mig mulighed for at ændre en enkelt værdi for at styre læsseren. Det er altid vigtigt at være i stand til nemt at justere størrelsen på vores læssere uden at skulle justere en masse ekstra værdier.

Dernæst vil vi bruge gradienter til at oprette søjlerne. Dette er den sværeste del! Lad os bruge en gradient at skabe to søjler som nedenstående:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Vores gradient er defineret med én farve og to farvestop. Resultatet er en solid farve uden falmning eller overgange. Størrelsen er lig med 34% bred og 8% høj. Det er også placeret i midten (50%). Tricket er brugen af ​​søgeordsværdien space — dette dublerer gradienten, hvilket giver os to samlede søjler.

Fra specifikationen:

Billedet gentages så ofte, som det passer inden for baggrundspositioneringsområdet uden at blive klippet, og derefter fordeles billederne for at udfylde området. Det første og sidste billede rører ved kanten af ​​området.

Jeg bruger en bredde svarende til 34% hvilket betyder, at vi ikke kan have mere end to streger (3*34% er større end 100%) men med to streger vil vi have tomme pladser (100% - 2 * 34% = 32%). Dette mellemrum er placeret i midten mellem de to søjler. Med andre ord bruger vi en bredde til den gradient, der er mellem 33% , 50% for at sikre, at vi har mindst to stænger med en lille smule mellemrum. Værdien space er det, der placerer dem korrekt for os.

Vi gør det samme og laver en anden lignende gradient for at få yderligere to streger øverst og nederst, som giver os en background ejendomsværdi af:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Vi kan optimere det ved at bruge en CSS-variabel for at undgå gentagelser:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Så nu har vi fire søjler, og takket være CSS-variabler kan vi skrive farveværdien én gang, hvilket gør det nemt at opdatere senere (som vi gjorde med størrelsen på indlæseren).

For at oprette de resterende søjler, lad os trykke på .loader element og dets ::before pseudo-element for at få yderligere fire takter for i alt otte i alt.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Bemærk brugen af display: grid. Dette giver os mulighed for at stole på nettets standard stretch justering for at få pseudo-elementet til at dække hele området af dets forælder; Derfor er der ingen grund til at specificere en dimension på det - endnu et trick, der reducerer koden og undgår, at vi skal håndtere en masse værdier!

Lad os nu rotere pseudo-elementet med 45deg for at placere de resterende stænger. Hold musen over følgende demo for at se tricket:

Indstilling af opacitet

Det, vi forsøger at gøre, er at skabe indtrykket af, at der er en bjælke, der efterlader et spor af falmende stænger bag sig, når den bevæger sig en cirkulær sti. Det, vi har brug for nu, er at lege med gennemsigtigheden af ​​vores barer for at lave det spor, som vi vil gøre med CSS mask kombineret med en konisk gradient som følger:

mask: conic-gradient(from 22deg,#0003,#000);

For bedre at se tricket, lad os anvende dette på en fuldfarvet boks:

Gennemsigtigheden af ​​den røde farve øges gradvist med uret. Vi anvender dette på vores læsser, og vi har stængerne med forskellig opacitet:

I virkeligheden ser hver bjælke ud til at falme, fordi den er maskeret af en gradient og falder mellem to semi-transparente farver. Det er næppe mærkbart, når dette kører, så det er ligesom at kunne sige, at alle stængerne har den samme farve med en forskellig grad af opacitet.

Rotationen

Lad os anvende en rotationsanimation for at få vores loader. Bemærk, at vi har brug for en trinvis animation og ikke en kontinuerlig, det er derfor, jeg bruger steps(8). 8 er intet andet end antallet af søjlerne, så den værdi kan ændres alt efter hvor mange søjler der er i brug.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Det er det! Vi har vores læsser med kun ét element og et par linjer CSS. Vi kan nemt styre dens størrelse og farve ved at justere én værdi.

Da vi kun brugte ::before pseudo-element, kan vi tilføje yderligere fire søjler ved at bruge ::after at ende med 12 streger i alt og næsten den samme kode:

Vi opdaterer rotationen af ​​vores pseudo-elementer for at overveje 30deg , 60deg i stedet for 45deg mens du bruger en XNUMX-trins animation i stedet for otte. Jeg sænkede også højden til 5% i stedet for 8% for at gøre stængerne lidt tyndere.

Bemærk også, at vi har grid-area: 1/1 på pseudo-elementerne. Dette giver os mulighed for at placere dem i samme område som hinanden, stablet oven på hinanden.

Gæt hvad? Vi kan nå ud til den samme loader ved hjælp af en anden implementering:

Kan du finde ud af logikken bag koden? Her er et tip: opaciteten håndteres ikke længere med en CSS mask men inde i gradienten og bruger også opacity ejendom.

Hvorfor ikke prikker i stedet?

Det kan vi helt:

Hvis du tjekker koden, vil du se, at vi nu arbejder med en radial gradient i stedet for en lineær. Ellers er konceptet helt det samme, hvor masken skaber et indtryk af opacitet, men vi lavede formerne som cirkler i stedet for linjer.

Nedenfor er en figur, der illustrerer den nye gradientkonfiguration:

Hvis du bruger Safari, skal du være opmærksom på, at demoen kan være buggy. Det er fordi Safari i øjeblikket mangler support til at syntaks i radiale gradienter. Men vi kan omkonfigurere gradienten lidt for at overvinde det:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Flere læssereksempler

Her er en anden idé til en spinner loader, der ligner den forrige.

For denne ene stoler jeg kun på background , mask for at skabe formen (ingen pseudo-elementer er nødvendige). Jeg definerer også konfigurationen med CSS-variabler for at kunne skabe en masse variationer fra den samme kode - endnu et eksempel på kun CSS-variablernes beføjelser. Jeg skrev en anden artikel om denne teknik hvis du vil have flere detaljer.

Bemærk, at nogle browsere stadig er afhængige af en -webkit- præfiks for mask-composite med sit eget sæt værdier, og vil ikke vise spinneren i demoen. Her er en måde at gøre det på uden mast-composite for mere browserunderstøttelse.

Jeg har en anden til dig:

Til denne bruger jeg en background-color at styre farven og bruge mask , mask-composite for at skabe den endelige form:

Inden vi slutter, er her nogle flere spindelæssere, jeg lavede for et stykke tid siden. Jeg er afhængig af forskellige teknikker, men bruger stadig gradienter, masker, pseudo-elementer osv. Det kunne være en god øvelse at finde ud af logikken i hver enkelt og lære nye tricks på samme tid. Når det er sagt, hvis du har spørgsmål om dem, er kommentarafsnittet nedenfor.

Indpakning op

Se, der er så meget vi kan gøre i CSS med intet andet end en enkelt div, et par gradienter, pseudo-elementer, variabler. Det ser ud til, at vi har skabt en hel masse forskellige roterende læssere, men de er alle grundlæggende det samme med små ændringer.

Dette er kun begyndelsen. I denne serie vil vi se på flere ideer og avancerede koncepter til at skabe CSS-loadere.

---

Single Element Loaders: The Spinner 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-spinner/