Single Element Loaders: The Bars

Vi har tittat på spinnare. Vi har tittat på prickar. Nu ska vi ta itu med ett annat vanligt mönster för lastare: barer. Och vi kommer att göra samma sak i den här tredje artikeln i serien som vi har de andra genom att göra den med bara ett element och med flexibel CSS som gör det enkelt att skapa varianter.

Låt oss börja med inte en, inte två, utan 20 exempel på stånglastare.

Vad?! Kommer du att beskriva var och en av dem? Det är för mycket för en artikel!

Det kan verka så vid första anblicken! Men alla förlitar sig på samma kodstruktur och vi uppdaterar bara ett fåtal värden för att skapa variationer. Det är all kraften med CSS. Vi lär oss inte hur man skapar en loader, men vi lär oss olika tekniker som gör att vi kan skapa så mycket loader som vi vill med bara samma kodstruktur.

Låt oss göra några barer!

Vi börjar med att definiera måtten för dem med hjälp av width (eller height) Med aspect-ratio att behålla proportionerna:

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

Vi "falskar" typ tre staplar med en linjär gradient i bakgrunden - mycket lik hur vi skapade punktladdare i del 2 av den här 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% */
}

Ovanstående kod ger oss följande resultat:

Liksom de andra artiklarna i den här serien kommer vi att ta itu med en hel del background knep. Så om du någon gång känner att vi hoppar runt för snabbt eller känner att du behöver lite mer detaljer, kolla gärna in dem. Du kan också läsa min Stack Overflow svar där jag ger en detaljerad förklaring om hur allt detta fungerar.

Animerar barerna

Vi animerar antingen elementets storlek eller position för att skapa barlastaren. Låt oss animera storleken genom att definiera följande animeringsnyckelrutor:

@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 vad som händer där? Mellan 0% och 100% ändrar animationen background-size av elementets bakgrundsgradient. Varje nyckelbildruta anger tre bakgrundsstorlekar (en för varje övertoning).

Och här är vad vi får:

Kan du börja föreställa dig alla möjliga variationer vi kan få genom att leka med olika animationskonfigurationer för storlekarna eller positionerna?

Låt oss fixa storleken till 20% 50% och uppdatera positionerna den här gången:

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

...vilket ger oss ytterligare en lastare!

Du har förmodligen fått tricket nu. Allt du behöver är att definiera en tidslinje som du översätter till en nyckelbildruta. Genom att animera storleken, positionen - eller båda! — det finns ett oändligt antal lastarmöjligheter till hands.

Och när vi väl blir bekväma med en sådan teknik kan vi gå längre och använda en mer komplex gradient för att skapa jämn mer lastare.

Räkna med de två sista exemplen i den demon, alla barladdare använder samma underliggande uppmärkning och stilar och olika kombinationer av animationer. Öppna koden och försök att visualisera varje bildruta oberoende av varandra; du kommer att se hur relativt trivialt det är att göra dussintals — om inte hundratals — av variationer.

Blir fancy

Minns du masktricket vi gjorde med dot loaders i den andra artikeln i denna serie? Vi kan göra samma sak här!

Om vi ​​tillämpar all ovanstående logik inuti mask egendom kan vi använda vilken bakgrundskonfiguration som helst för att lägga till en snygg färg till våra lastare.

Låt oss ta en demo och uppdatera den:

Allt jag gjorde var att uppdatera alla background-* med mask-* och jag lade till en gradientfärgning. Så enkelt är det och ändå får vi ännu en cool lastare.

Så det är ingen skillnad mellan prickarna och staplarna?

Ingen skillnad! Jag skrev två olika artiklar för att täcka så många exempel som möjligt men i båda förlitar jag mig på samma tekniker:

1. Gradienter för att skapa formerna (prickar eller staplar eller kanske något annat)
2. animera background-size och / eller background-position för att skapa lastaranimeringen
3. Lägger till mask för att lägga till en touch av färger

Runda stängerna

Låt oss prova något annat den här gången där vi kan runda kanterna på våra barer.

Att använda ett element och dess ::before och ::after pseudos definierar vi tre identiska staplar:

.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 ger oss tre staplar, denna gång utan att förlita oss på en linjär gradient:

Nu är tricket att fylla i de där staplarna med en härlig gradient. För att simulera en kontinuerlig gradient måste vi leka med background egenskaper. I figuren ovan definierar det gröna området området som täcks av lastaren. Det området ska vara storleken på gradienten och om vi räknar är det lika med att multiplicera båda sidorna märkta S i diagrammet, eller background-size: var(--s) var(--s).

Eftersom våra element är individuellt placerade måste vi uppdatera positionen för gradienten inuti var och en för att se till att alla överlappar varandra. På så sätt simulerar vi en kontinuerlig gradient även om det egentligen är tre av dem.

För huvudelementet (placerat i mitten) måste bakgrunden vara i mitten. Vi använder följande:

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

För pseudoelementet till vänster behöver vi bakgrunden till vänster

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

Och för pseudon till höger måste bakgrunden placeras till höger:

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

Med samma CSS-variabel, --_i, som vi använde för översättningen, kan vi skriva koden så här:

.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 är allt vi behöver göra att animera höjden och lägga till några förseningar! Här är tre exempel där allt som är annorlunda är färgerna och storlekarna:

Inslagning upp

Jag hoppas att du än så länge känner dig superuppmuntrad av alla krafter du har för att göra komplexa laddningsanimationer. Allt vi behöver är ett element, antingen gradienter eller pseudos för att rita staplarna, sedan några nyckelrutor för att flytta runt saker. Det är hela receptet för att få ett oändligt antal möjligheter, så gå ut och börja laga lite snygga saker!

Tills nästa artikel lämnar jag er med en rolig samling lastare där jag kombinerar prickarna och barerna!

---

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