Single Element Loaders: The Bars

Vi har set på spinnere. Vi har kigget på prikker. Nu skal vi tage fat på et andet almindeligt mønster for læssere: barer. Og vi vil gøre det samme i denne tredje artikel i serien, som vi har de andre, ved at lave den med kun ét element og med fleksibel CSS, der gør det nemt at skabe variationer.

Lad os starte med ikke én, ikke to, men 20 eksempler på stanglæssere.

Hvad?! Vil du uddybe hver enkelt af dem? Det er for meget for en artikel!

Det kan virke sådan ved første øjekast! Men alle er afhængige af den samme kodestruktur, og vi opdaterer kun nogle få værdier for at skabe variationer. Det er al magten ved CSS. Vi lærer ikke, hvordan man opretter én loader, men vi lærer forskellige teknikker, der gør det muligt for os at skabe så meget loader, som vi ønsker, ved blot at bruge den samme kodestruktur.

Lad os lave nogle barer!

Vi starter med at definere dimensionerne for dem ved hjælp af width (eller height) med aspect-ratio at opretholde proportioner:

.bars { width: 45px; aspect-ratio: 1;
}

Vi "falsker" på en måde tre bjælker med en lineær gradient i baggrunden - meget lig, hvordan vi skabte dot loaders i del 2 af denne serie.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Ovenstående kode vil give os følgende resultat:

Ligesom de andre artikler i denne serie kommer vi til at beskæftige os med en masse background tricks. Så hvis du nogensinde føler, at vi hopper for hurtigt rundt eller føler, at du har brug for lidt flere detaljer, så tjek dem ud. Du kan også læse min Stack Overflow svar, hvor jeg giver en detaljeret forklaring om hvordan alt dette fungerer.

Animering af stængerne

Vi animerer enten elementets størrelse eller position for at skabe stangindlæseren. Lad os animere størrelsen ved at definere følgende animationskeyframes:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Se hvad der sker der? Mellem 0% og 100% ændrer animationen background-size af elementets baggrundsgradient. Hver keyframe indstiller tre baggrundsstørrelser (en for hver gradient).

Og her er hvad vi får:

Kan du begynde at forestille dig alle de mulige variationer, vi kan få ved at lege med forskellige animationskonfigurationer for størrelserne eller positionerne?

Lad os rette størrelsen til 20% 50% og opdater positionerne denne gang:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…hvilket giver os endnu en læsser!

Du har sikkert fået tricket nu. Alt du behøver er at definere en tidslinje, som du oversætter til en keyframe. Ved at animere størrelsen, positionen - eller begge dele! — der er et uendeligt antal læssermuligheder lige ved hånden.

Og når vi først bliver fortrolige med sådan en teknik, kan vi gå længere og bruge en mere kompleks gradient til at skabe selv mere læssere.

Forvent de sidste to eksempler i den demo, alle bar-loadere bruger den samme underliggende markering og stilarter og forskellige kombinationer af animationer. Åbn koden og prøv at visualisere hver frame uafhængigt; du vil se, hvor relativt trivielt det er at lave dusinvis — hvis ikke hundredvis - af variationer.

Bliver fancy

Har du husket masketricket, vi lavede med dot loaders i den anden artikel i denne serie? Vi kan gøre det samme her!

Hvis vi anvender al ovenstående logik inde i mask egenskab kan vi bruge enhver baggrundskonfiguration til at tilføje en fancy farve til vores læssere.

Lad os tage en demo og opdatere den:

Alt jeg gjorde var at opdatere alle background-* med mask-* og jeg tilføjede en gradientfarvning. Så simpelt er det, og alligevel får vi endnu en sej læsser.

Så der er ingen forskel på prikkerne og søjlerne?

Ingen forskel! Jeg skrev to forskellige artikler for at dække så mange eksempler som muligt, men i begge er jeg afhængig af de samme teknikker:

1. Gradienter for at skabe formerne (prikker eller streger eller måske noget andet)
2. animere background-size og / eller background-position for at oprette loader-animationen
3. Tilføjelse af maske for at tilføje et strejf af farver

Afrunding af stængerne

Lad os prøve noget andet denne gang, hvor vi kan runde kanterne af vores stænger.

Brug af et element og dets ::before , ::after pseudos definerer vi tre identiske søjler:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Det giver os tre søjler, denne gang uden at stole på en lineær gradient:

Nu er tricket at udfylde de søjler med en dejlig gradient. For at simulere en kontinuerlig gradient skal vi lege med background ejendomme. I ovenstående figur definerer det grønne område det område, der dækkes af læsseren. Dette område skal være på størrelse med gradienten, og hvis vi regner ud, er det lig med at gange begge sider mærket S i diagrammet, eller background-size: var(--s) var(--s).

Da vores elementer er individuelt placeret, er vi nødt til at opdatere gradientens position inde i hver enkelt for at sikre, at de alle overlapper hinanden. På denne måde simulerer vi en kontinuerlig gradient, selvom det i virkeligheden er tre af dem.

For hovedelementet (placeret i midten) skal baggrunden være i midten. Vi bruger følgende:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Til pseudo-elementet til venstre har vi brug for baggrunden til venstre

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

Og for pseudo til højre skal baggrunden placeres til højre:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Ved at bruge den samme CSS-variabel, --_i, som vi brugte til oversættelsen, kan vi skrive koden sådan:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Nu skal vi bare animere højden og tilføje nogle forsinkelser! Her er tre eksempler, hvor det eneste, der er anderledes, er farverne og størrelserne:

Indpakning op

Jeg håber, at du indtil videre føler dig super opmuntret af alle de kræfter, du har til at lave komplekst udseende indlæsningsanimationer. Alt, hvad vi behøver, er et element, enten gradienter eller pseudoer til at tegne stregerne, så nogle keyframes til at flytte rundt på tingene. Det er hele opskriften på at få et uendeligt antal muligheder, så gå ud og begynd at lave nogle pæne ting sammen!

Indtil næste artikel vil jeg efterlade dig med en sjov samling af læssere, hvor jeg kombinerer prikkerne , stængerne!

---

Single Element Loaders: The Bars 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-bars/