Single Element Loaders: The Bars

Vi har sett på spinnere. Vi har sett på prikker. Nå skal vi takle et annet vanlig mønster for lastere: barer. Og vi kommer til å gjøre det samme i denne tredje artikkelen i serien som vi har de andre ved å lage den med bare ett element og med fleksibel CSS som gjør det enkelt å lage varianter.

La oss starte med ikke én, ikke to, men 20 eksempler på stanglastere.

Hva?! Skal du detaljere hver enkelt av dem? Det er for mye for en artikkel!

Det kan virke slik ved første øyekast! Men alle av dem er avhengige av den samme kodestrukturen, og vi oppdaterer bare noen få verdier for å lage variasjoner. Det er all kraften til CSS. Vi lærer ikke hvordan vi lager én laster, men vi lærer forskjellige teknikker som gjør at vi kan lage så mye laster vi vil ved å bruke bare den samme kodestrukturen.

La oss lage noen barer!

Vi starter med å definere dimensjonene for dem ved hjelp av width (eller height) med aspect-ratio å opprettholde proporsjoner:

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

Vi "falsker" på en måte tre stolper med en lineær gradient i bakgrunnen - veldig lik hvordan vi laget punktlastere i del 2 av denne serien.

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

Koden ovenfor vil gi oss følgende resultat:

I likhet med de andre artiklene i denne serien kommer vi til å forholde oss til mange background lureri. Så hvis du noen gang føler at vi hopper rundt for fort eller føler at du trenger litt mer detaljer, vennligst sjekk dem ut. Du kan også lese min Stack Overflow svar der jeg gir en detaljert forklaring om hvordan alt dette fungerer.

Animerer barene

Vi animerer enten elementets størrelse eller plassering for å lage barlasteren. La oss animere størrelsen ved å definere følgende animasjonsnøkkelrammer:

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

Ser du hva som skjer der? Mellom 0% og 100% endrer animasjonen background-size av elementets bakgrunnsgradient. Hver keyframe angir tre bakgrunnsstørrelser (en for hver gradient).

Og her er hva vi får:

Kan du begynne å forestille deg alle mulige variasjoner vi kan få ved å leke med forskjellige animasjonskonfigurasjoner for størrelsene eller posisjonene?

La oss fikse størrelsen til 20% 50% og oppdater posisjonene denne gangen:

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

…som gir oss en annen laster!

Du har sannsynligvis fått trikset nå. Alt du trenger er å definere en tidslinje som du oversetter til en nøkkelramme. Ved å animere størrelsen, posisjonen - eller begge deler! – det er et uendelig antall lastermuligheter for hånden.

Og når vi først blir komfortable med en slik teknikk, kan vi gå lenger og bruke en mer kompleks gradient for å lage jevn mer lastere.

Forvent de to siste eksemplene i den demoen, alle stanglasterne bruker samme underliggende markering og stiler og forskjellige kombinasjoner av animasjoner. Åpne koden og prøv å visualisere hver ramme uavhengig; du vil se hvor relativt trivielt det er å lage dusinvis - om ikke hundrevis - av variasjoner.

Blir fancy

Husket du masketrikset vi gjorde med dot loaders i den andre artikkelen i denne serien? Vi kan gjøre det samme her!

Hvis vi bruker all logikken ovenfor inne i mask egenskap vi kan bruke hvilken som helst bakgrunnskonfigurasjon for å legge til en fancy farge til våre lastere.

La oss ta en demo og oppdatere den:

Alt jeg gjorde var å oppdatere alt background-* med mask-* og jeg la til en gradientfarging. Så enkelt som det, og likevel får vi nok en kul laster.

Så det er ingen forskjell mellom prikkene og søylene?

Ingen forskjell! Jeg skrev to forskjellige artikler for å dekke så mange eksempler som mulig, men i begge er jeg avhengig av de samme teknikkene:

1. Gradienter for å lage figurene (prikker eller stolper eller kanskje noe annet)
2. animere background-size og / eller background-position for å lage loader-animasjonen
3. Legger til maske for å legge til et snev av farger

Avrunding av stolpene

La oss prøve noe annet denne gangen hvor vi kan runde kantene på stengene våre.

Bruke ett element og dets ::before og ::after pseudos, definerer vi tre identiske stolper:

.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 gir oss tre streker, denne gangen uten å stole på en lineær gradient:

Nå er trikset å fylle ut disse stolpene med en nydelig gradient. For å simulere en kontinuerlig gradient må vi leke med background egenskaper. I figuren ovenfor definerer det grønne området området som dekkes av lasteren. Dette området skal være på størrelse med gradienten, og hvis vi regner, er det lik å multiplisere begge sider merket S i diagrammet, eller background-size: var(--s) var(--s).

Siden elementene våre er individuelt plassert, må vi oppdatere posisjonen til gradienten inne i hvert enkelt for å sikre at alle overlapper hverandre. På denne måten simulerer vi en kontinuerlig gradient selv om det egentlig er tre av dem.

For hovedelementet (plassert i midten), må bakgrunnen være i midten. Vi bruker følgende:

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

For pseudo-elementet til venstre trenger vi bakgrunnen til venstre

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

Og for pseudo til høyre, må bakgrunnen plasseres til høyre:

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

Ved å bruke samme CSS-variabel, --_i, som vi brukte for oversettelsen, kan vi skrive koden slik:

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

Nå er alt vi trenger å gjøre å animere høyden og legge til noen forsinkelser! Her er tre eksempler hvor alt som er annerledes er farger og størrelser:

Innpakning opp

Jeg håper så langt du føler deg super oppmuntret av alle kreftene du har for å lage komplekse lasteanimasjoner. Alt vi trenger er ett element, enten gradienter eller pseudoer for å tegne stolpene, så noen keyframes for å flytte ting rundt. Det er hele oppskriften for å få et uendelig antall muligheter, så gå ut og begynn å lage noen fine ting!

Inntil neste artikkel vil jeg gi deg en morsom samling av lastere der jeg kombinerer prikkene og stolpene!

---

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