Laders met één element: de spinner

Het maken van CSS-only loaders is een van mijn favoriete taken. Het is altijd bevredigend om naar die oneindige animaties te kijken. En natuurlijk zijn er veel van technieken en benaderingen om ze te maken — niet nodig kijk verder dan CodePen om te zien hoeveel. In dit artikel zullen we echter zien hoe je een lader met één element zo min mogelijk code kunt laten schrijven.

Ik heb een verzameling gemaakt van meer dan 500 enkele div-laders en in deze vierdelige serie ga ik de trucs delen die ik heb gebruikt om veel van hen te maken. We zullen een groot aantal voorbeelden behandelen, die laten zien hoe kleine aanpassingen kunnen leiden tot leuke variaties en hoe weinig code we hoeven te schrijven om het allemaal te laten gebeuren!

Voor dit eerste artikel gaan we een van de meest voorkomende laadpatronen maken: draaiende staven:

Hier is de aanpak

Een triviale implementatie voor deze lader is om één element te maken voor elke staaf die in een bovenliggend element is gewikkeld (voor negen totale elementen), en vervolgens te spelen met opacity en transform om het draaiende effect te krijgen.

Mijn implementatie vereist echter slechts één element:

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

…en 10 CSS-declaraties:

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

Laten we dat opsplitsen

Op het eerste gezicht ziet de code er misschien vreemd uit, maar je zult zien dat het eenvoudiger is dan je zou denken. De eerste stap is het definiëren van de afmeting van het element. In ons geval is het een 150px vierkant. We kunnen zetten aspect-ratio om te gebruiken, zodat het element vierkant blijft, wat er ook gebeurt.

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

Bij het bouwen van CSS-laders probeer ik altijd één waarde te hebben voor het regelen van de totale grootte. In dit geval is het de width en alle berekeningen die we behandelen, verwijzen naar die waarde. Hierdoor kan ik een enkele waarde wijzigen om de lader te besturen. Het is altijd belangrijk om de grootte van onze laders eenvoudig te kunnen aanpassen zonder dat er veel extra waarden moeten worden aangepast.

Vervolgens zullen we verlopen gebruiken om de balken te maken. Dit is het lastigste deel! Laten we gebruiken een verloop om te maken twee bars zoals de onderstaande:

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

Ons verloop is gedefinieerd met één kleur en twee kleurstops. Het resultaat is een effen kleur zonder vervaging of overgangen. De maat is gelijk aan: 34% breed en 8% hoog. Het is ook in het midden geplaatst (50%). De truc is het gebruik van de sleutelwoordwaarde space - dit dupliceert het verloop, waardoor we twee totale balken krijgen.

Van de specificatie:

De afbeelding wordt zo vaak herhaald als past binnen het positioneringsgebied van de achtergrond zonder te worden bijgesneden en vervolgens worden de afbeeldingen uit elkaar geplaatst om het gebied te vullen. De eerste en laatste beelden raken de randen van het gebied.

Ik gebruik een breedte gelijk aan 34% wat betekent dat we niet meer dan twee balken kunnen hebben (3*34% groter dan 100%) maar met twee balken hebben we lege ruimtes (100% - 2 * 34% = 32%). Die ruimte wordt in het midden tussen de twee staven geplaatst. Met andere woorden, we gebruiken een breedte voor het verloop dat ligt tussen 33% en 50% om ervoor te zorgen dat we ten minste twee balken hebben met een beetje ruimte ertussen. De waarde space is wat ze correct voor ons plaatst.

We doen hetzelfde en maken een tweede soortgelijk verloop om nog twee balken aan de boven- en onderkant te krijgen, wat ons een geeft background eigendomswaarde van:

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

We kunnen dat optimaliseren met behulp van een CSS-variabele om herhaling te voorkomen:

--_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;

Dus nu hebben we vier balken en dankzij CSS-variabelen kunnen we de kleurwaarde één keer schrijven, waardoor het later gemakkelijk kan worden bijgewerkt (zoals we deden met de grootte van de lader).

Laten we, om de resterende balken te maken, gebruik maken van de .loader element en zijn ::before pseudo-element om nog vier maten te krijgen voor een totaal van acht in totaal.

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

Let op het gebruik van display: grid. Hierdoor kunnen we vertrouwen op de standaardinstelling van het raster stretch uitlijning om het pseudo-element het hele gebied van zijn ouder te laten bedekken; het is dus niet nodig om er een dimensie op te specificeren - nog een truc die de code verkleint en voorkomt dat we met veel waarden te maken hebben!

Laten we nu het pseudo-element roteren met 45deg om de overige balken te positioneren. Beweeg de muis over de volgende demo om de truc te zien:

Dekking instellen

Wat we proberen te doen is de indruk wekken dat er één balk is die een spoor van vervagende balken achter zich laat terwijl het een cirkelvormig pad aflegt. Wat we nu nodig hebben, is spelen met de transparantie van onze balken om dat spoor te maken, wat we gaan doen met CSS mask gecombineerd met een conische gradiënt als volgt:

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

Om de truc beter te zien, passen we dit toe op een gekleurd vak:

De transparantie van de rode kleur neemt met de klok mee geleidelijk toe. We passen dit toe op onze lader en we hebben de balken met verschillende dekkingen:

In werkelijkheid lijkt elke balk te vervagen omdat deze wordt gemaskeerd door een verloop en tussen twee semi-transparante kleuren valt. Het is nauwelijks merkbaar wanneer dit wordt uitgevoerd, dus het is alsof je kunt zeggen dat alle balken dezelfde kleur hebben met een ander niveau van dekking.

de rotatie

Laten we een rotatie-animatie toepassen om onze loader te krijgen. Merk op dat we een getrapte animatie nodig hebben en geen continue animatie, daarom gebruik ik steps(8). 8 is niets anders dan het aantal staven, zodat de waarde kan worden gewijzigd afhankelijk van het aantal staven dat in gebruik is.

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

Dat is het! We hebben onze loader met slechts één element en een paar regels CSS. We kunnen de grootte en kleur eenvoudig regelen door één waarde aan te passen.

Aangezien we alleen de ::before pseudo-element, kunnen we nog vier balken toevoegen door te gebruiken ::after om te eindigen met in totaal 12 streepjes en bijna dezelfde code:

We werken de rotatie van onze pseudo-elementen bij om te overwegen: 30deg en 60deg in plaats van 45deg terwijl u een animatie met twaalf stappen gebruikt in plaats van acht. Ik heb ook de hoogte verlaagd naar 5% in plaats van 8% om de staven wat dunner te maken.

Merk ook op dat we grid-area: 1/1 op de pseudo-elementen. Hierdoor kunnen we ze in hetzelfde gebied als elkaar plaatsen, op elkaar gestapeld.

Raad eens? We kunnen dezelfde lader bereiken met een andere implementatie:

Kun jij de logica achter de code achterhalen? Hier is een hint: de dekking wordt niet langer afgehandeld met een CSS mask maar binnen het verloop en gebruikt ook de opacity eigendom.

Waarom geen punten in plaats daarvan?

Dat kunnen we helemaal:

Als je de code controleert, zul je zien dat we nu met een radiale gradiënt werken in plaats van een lineaire. Verder is het concept precies hetzelfde waar het masker de indruk van ondoorzichtigheid wekt, maar we hebben de vormen gemaakt als cirkels in plaats van lijnen.

Hieronder ziet u een afbeelding om de nieuwe gradiëntconfiguratie te illustreren:

Als je Safari gebruikt, houd er dan rekening mee dat de demo mogelijk bugs bevat. Dat komt omdat Safari momenteel geen ondersteuning heeft voor de at syntaxis in radiale gradiënten. Maar we kunnen de gradiënt een beetje opnieuw configureren om dat te overwinnen:

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

Meer voorbeelden van laders

Hier is nog een idee voor een spinner-lader die lijkt op de vorige.

Voor deze vertrouw ik alleen op background en mask om de vorm te maken (geen pseudo-elementen nodig). Ik definieer ook de configuratie met CSS-variabelen om veel variaties van dezelfde code te kunnen maken - nog een voorbeeld van alleen de kracht van CSS-variabelen. Ik schreef nog een artikel over deze techniek als u meer details wilt.

Merk op dat sommige browsers nog steeds vertrouwen op a -webkit- voorvoegsel voor mask-composite met zijn eigen set waarden, en zal de spinner niet weergeven in de demo. Hier is een manier om het te doen zonder mast-composite voor meer browserondersteuning.

Ik heb er nog een voor je:

Voor deze gebruik ik een background-color om de kleur te regelen, en gebruik mask en mask-composite om de uiteindelijke vorm te maken:

Voordat we eindigen, zijn hier nog enkele draaiende laders die ik een tijdje geleden heb gemaakt. Ik vertrouw op verschillende technieken, maar gebruik nog steeds gradiënten, maskers, pseudo-elementen, enz. Het zou een goede oefening kunnen zijn om de logica van elke techniek te achterhalen en tegelijkertijd nieuwe trucs te leren. Dit gezegd hebbende, als je er vragen over hebt, staat het commentaargedeelte hieronder.

Afsluiten

Kijk, er is zoveel dat we kunnen doen in CSS met niets anders dan een enkele div, een paar gradiënten, pseudo-elementen, variabelen. Het lijkt alsof we een hele reeks verschillende draaiende laders hebben gemaakt, maar ze zijn allemaal in principe hetzelfde met kleine aanpassingen.

Dit is nog maar het begin. In deze serie zullen we kijken naar meer ideeën en geavanceerde concepten voor het maken van CSS-laders.

---

Laders met één element: de spinner 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-spinner/