Laders met één element: de staven

We hebben gekeken naar spinners. We hebben naar stippen gekeken. Nu gaan we een ander veelvoorkomend patroon voor laders aanpakken: bars. En we gaan hetzelfde doen in dit derde artikel van de serie als we de anderen hebben gedaan door het te maken met slechts één element en met flexibele CSS die het gemakkelijk maakt om variaties te creëren.

Laten we beginnen met niet één, niet twee, maar 20 voorbeelden van staafladers.

Wat?! Ga je ze allemaal in detail beschrijven? Dat is te veel voor een artikel!

Zo lijkt het op het eerste gezicht misschien! Maar ze vertrouwen allemaal op dezelfde codestructuur en we werken slechts een paar waarden bij om variaties te creëren. Dat is de kracht van CSS. We leren niet hoe we één loader moeten maken, maar we leren verschillende technieken waarmee we zoveel loader kunnen maken als we willen met slechts dezelfde codestructuur.

Laten we wat repen maken!

We beginnen met het definiëren van de afmetingen voor hen met behulp van width (of height) Met aspect-ratio proportie behouden:

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

We "nep" drie balken met een lineair verloop op de achtergrond - vergelijkbaar met hoe we puntladers in deel 2 van deze serie hebben gemaakt.

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

De bovenstaande code geeft ons het volgende resultaat:

Net als de andere artikelen in deze serie gaan we veel behandelen: background bedrog. Dus als je ooit het gevoel hebt dat we te snel rondspringen of het gevoel hebt dat je wat meer details nodig hebt, bekijk die dan alsjeblieft. Je kunt ook mijn . lezen Stack Overflow antwoord waar ik geef een gedetailleerde uitleg over hoe dit allemaal werkt.

De staven animeren

We animeren de grootte of positie van het element om de staaflader te maken. Laten we de grootte animeren door de volgende animatiehoofdframes te definiëren:

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

Zie je wat daar gebeurt? Tussen 0% en 100% verandert de animatie de background-size van het achtergrondverloop van het element. Elk hoofdframe stelt drie achtergrondformaten in (één voor elk verloop).

En dit is wat we krijgen:

Kun je je alle mogelijke variaties voorstellen die we kunnen krijgen door te spelen met verschillende animatieconfiguraties voor de maten of de posities?

Laten we de maat aanpassen aan: 20% 50% en update de posities deze keer:

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

…wat ons een andere lader oplevert!

Waarschijnlijk heb je de truc inmiddels door. Het enige dat u nodig hebt, is een tijdlijn definiëren die u vertaalt in een keyframe. Door de grootte, de positie te animeren - of beide! — er is een oneindig aantal laadmogelijkheden binnen handbereik.

En als we eenmaal vertrouwd zijn met zo'n techniek, kunnen we verder gaan en een complexere gradiënt gebruiken om gelijkmatige te creëren meer laders.

Verwacht voor de laatste twee voorbeelden in die demo dat alle balkladers dezelfde onderliggende opmaak en stijlen en verschillende combinaties van animaties gebruiken. Open de code en probeer elk frame afzonderlijk te visualiseren; je zult zien hoe relatief triviaal het is om tientallen te maken - zo niet honderden — van variaties.

Zin krijgen

Herinner je je de maskertruc die we deden met de puntladers erin? het tweede artikel van deze serie? Dat kunnen we hier ook!

Als we alle bovenstaande logica toepassen in de mask eigenschap kunnen we elke achtergrondconfiguratie gebruiken om een ​​mooie kleur aan onze laders toe te voegen.

Laten we een demo nemen en deze updaten:

Het enige wat ik deed is alle background-* Met mask-* en ik heb een verloopkleuring toegevoegd. Zo simpel als dat en toch krijgen we weer een coole loader.

Er is dus geen verschil tussen de stippen en de balken?

Geen verschil! Ik heb twee verschillende artikelen geschreven om zoveel mogelijk voorbeelden te behandelen, maar in beide vertrouw ik op dezelfde technieken:

1. Verlopen om de vormen te maken (punten of balken of misschien iets anders)
2. animeren background-size en / of background-position om de loader-animatie te maken
3. Masker toevoegen om een ​​vleugje kleuren toe te voegen

De staven afronden

Laten we deze keer iets anders proberen, waarbij we de randen van onze staven kunnen afronden.

Eén element en zijn . gebruiken ::before en ::after pseudos, definiëren we drie identieke balken:

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

Dat geeft ons drie balken, deze keer zonder te vertrouwen op een lineaire gradiënt:

De truc is nu om die balken in te vullen met een mooi verloop. Om een ​​continu verloop te simuleren, moeten we spelen met background eigendommen. In de bovenstaande afbeelding definieert het groene gebied het gebied dat door de lader wordt bestreken. Dat gebied moet de grootte van het verloop hebben en, als we de wiskunde doen, is het gelijk aan het vermenigvuldigen van beide zijden met het label S in het diagram, of background-size: var(--s) var(--s).

Omdat onze elementen afzonderlijk zijn geplaatst, moeten we de positie van de gradiënt in elke elementen bijwerken om ervoor te zorgen dat ze allemaal overlappen. Op deze manier simuleren we één continu verloop, ook al zijn het er in werkelijkheid drie.

Voor het hoofdelement (in het midden geplaatst) moet de achtergrond in het midden staan. Wij gebruiken het volgende:

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

Voor het pseudo-element aan de linkerkant hebben we de achtergrond aan de linkerkant nodig

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

En voor de pseudo rechts moet de achtergrond rechts worden geplaatst:

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

Met dezelfde CSS-variabele, --_i, die we voor de vertaling hebben gebruikt, kunnen we de code als volgt schrijven:

.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 hoeven we alleen nog maar de hoogte te animeren en wat vertragingen toe te voegen! Hier zijn drie voorbeelden waarbij het enige dat anders is de kleuren en maten zijn:

Afsluiten

Ik hoop dat je je tot nu toe super aangemoedigd voelt door alle krachten die je hebt om complex ogende laadanimaties te maken. Het enige dat we nodig hebben, is één element, ofwel gradiënten of pseudos om de balken te tekenen, en dan enkele keyframes om dingen te verplaatsen. Dat is het hele recept voor een eindeloos aantal mogelijkheden, dus ga erop uit en begin met het koken van leuke dingen!

Tot het volgende artikel zal ik je achterlaten met een grappige verzameling laders waar ik mee combineer de punten en de tralies!

---

Laders met één element: de staven oorspronkelijk gepubliceerd op CSS-trucs. Je zou moeten ontvang de nieuwsbrief.

• Coinsmart. Europa's beste Bitcoin- en crypto-uitwisseling.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. GRATIS TOEGANG.
• CryptoHawk. Altcoin-radar. Gratis proefversie.
• Bron: https://css-tricks.com/single-element-loaders-the-bars/