Laders met één element: The Dots

We kijken naar laders in deze serie. Meer dan dat, we breken enkele veelvoorkomende loader-patronen af ​​en hoe u ze opnieuw kunt maken met niets meer dan een enkele div. Tot nu toe hebben we uit elkaar gehaald de klassieke draaiende lader. Laten we nu eens kijken naar een andere die u waarschijnlijk goed kent: de punten.

Overal zijn puntladers te vinden. Ze zijn netjes omdat ze meestal bestaan ​​uit drie stippen die eruitzien als een tekst-ellips (...) die rond danst.

Ons doel hier is om hetzelfde te maken van een enkel div-element. Met andere woorden, er is niet één div per stip of individuele animaties voor elke stip.

Dat voorbeeld van een loader hierboven is gemaakt met een enkel div-element, een paar CSS-declaraties en geen pseudo-elementen. Ik combineer twee technieken met behulp van CSS background en mask. En als we klaar zijn, zullen we zien hoe het animeren van een achtergrondverloop helpt om de illusie te creëren dat elke stip van kleur verandert terwijl ze achter elkaar op en neer bewegen.

De achtergrondanimatie

Laten we beginnen met de achtergrondanimatie:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Ik hoop dat dit er vrij duidelijk uitziet. Wat we hebben is een 180px-breed .loader element dat twee kegelvormige gradiënten toont met harde kleurstops tussen twee kleuren elk - de eerste gradiënt is rood en blauw langs de bovenste helft van de .loaderen het tweede verloop is groen en paars langs de onderste helft.

De grootte van de achtergrond van de lader (200% breed), zien we slechts één van die kleuren in elke helft tegelijk. Dan hebben we deze kleine animatie die de positie van die achtergrondgradiënten voor altijd en altijd naar links, rechts en weer terug duwt.

Bij het omgaan met achtergrondeigenschappen — vooral background-position — ik verwijs altijd naar mijn Stack Overflow-antwoord waar ik een gedetailleerde uitleg geef over hoe dit allemaal werkt. Als je je niet op je gemak voelt met CSS-achtergrondtrucs, raad ik je ten zeerste aan dat antwoord te lezen om te helpen met wat daarna komt.

Merk in de animatie op dat de eerste laag is Y=0% (bovenaan geplaatst) terwijl X is verandert van 0% naar 100%. Voor de tweede laag hebben we hetzelfde voor X maar Y=100% (onderaan geplaatst).

Waarom een ​​gebruiken conic-gradient() in plaats van linear-gradient()?

Goede vraag! Intuïtief zouden we een lineair verloop moeten gebruiken om een ​​tweekleurig verloop zoals dit te maken:

linear-gradient(90deg, red 50%, blue 0)

Maar we kunnen hetzelfde bereiken met a conic-gradient() - en met minder code. We verkleinen de code en leren daarbij ook nog een nieuwe truc!

De kleuren naar links en rechts schuiven is een leuke manier om het te laten lijken alsof we van kleur veranderen, maar het is misschien beter als we in plaats daarvan onmiddellijk van kleur veranderen - op die manier is er geen kans dat een loader-stip twee kleuren tegelijkertijd knippert . Om dit te doen, veranderen we de animation's timing functie van linear naar steps(1)

De laderpunten

Als je meeging met de eerste artikel in deze serie, ik wed dat je weet wat er daarna komt: CSS-maskers! Wat maskers zo geweldig maakt, is dat ze ons een soort van delen van een achtergrond uitknippen in de vorm van een ander element. Dus in dit geval willen we een paar stippen maken, de achtergrondverlopen door de stippen laten zien en alle delen van de achtergrond wegsnijden die geen deel uitmaken van een stip.

We gaan gebruiken radial-gradient() voor deze:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Er zit wat gedupliceerde code in, dus laten we een CSS-variabele maken om dingen te verkleinen:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Cool cool. Maar nu hebben we een nieuwe animatie nodig die helpt om de stippen op en neer te bewegen tussen de geanimeerde verlopen.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Ja, dat zijn in totaal drie radiale gradiënten, allemaal met dezelfde configuratie en dezelfde grootte - de animatie zal de positie van elk bijwerken. Merk op dat de X coördinaat van elk punt is vast. De mask-position is zo gedefinieerd dat de eerste punt links staat (0%), de tweede in het midden (50%), en de derde rechts (100%). We updaten alleen de Y coördinaat van 0% naar 100% om de stippen te laten dansen.

Dit is wat we krijgen:

Combineer dit nu met onze verloopanimatie en er begint magie te gebeuren:

Variaties in de puntlader

De CSS-variabele die we in het laatste voorbeeld hebben gemaakt, maakt het veel gemakkelijker om nieuwe kleuren in te wisselen en meer variaties van dezelfde lader te maken. Bijvoorbeeld verschillende kleuren en maten:

Hoe zit het met een andere beweging voor onze stippen?

Hier heb ik alleen de animatie bijgewerkt om rekening te houden met verschillende posities, en we krijgen een andere lader met dezelfde codestructuur!

De animatietechniek die ik voor de maskerlagen heb gebruikt, kan ook worden gebruikt met achtergrondlagen om veel verschillende laders met één kleur te maken. Ik heb hier een uitgebreid artikel over geschreven. U zult zien dat we vanuit dezelfde codestructuur verschillende variaties kunnen creëren door simpelweg een paar waarden te veranderen. Ik deel een paar voorbeelden aan het einde van het artikel.

Waarom geen lader met één punt?

Deze zou vrij gemakkelijk te grommen moeten zijn, omdat ik dezelfde techniek gebruik, maar met een meer eenvoudige logica:

Hier is nog een voorbeeld van een lader waar ik ook aan het animeren ben radial-gradient gecombineerd met CSS-filters en mix-blend-mode om een ​​blobby-effect te creëren:

Als je de code controleert, zul je zien dat het enige wat ik daar doe, is het animeren van de background-position, precies zoals we deden met de vorige lader, maar met een vleugje background-size om het te laten lijken alsof de klodder groter wordt naarmate hij stippen absorbeert.

Als je de magie achter dat blob-effect wilt begrijpen, kun je verwijzen naar: deze interactieve dia's (alleen Chrome) door Ana Tudor omdat ze het onderwerp zo goed dekt!

Hier is nog een idee voor een puntlader, deze keer met een andere techniek:

Deze is slechts 10 CSS-declaraties en een keyframe. Het hoofdelement en zijn twee pseudo-elementen hebben dezelfde achtergrondconfiguratie met één radiale gradiënt. Elk creëert één punt, voor een totaal van drie. De animatie verplaatst het verloop van boven naar beneden door voor elke stip verschillende vertragingen te gebruiken.

Oh, en let op hoe deze demo CSS Grid gebruikt. Dit stelt ons in staat om gebruik te maken van de standaard van het raster stretch uitlijning zodat beide pseudo-elementen het hele gebied van hun ouder bestrijken. Maatvoering is niet nodig! Duw de rond een beetje met translate() en we zijn helemaal klaar.

Meer voorbeelden!

Om het punt naar huis te brengen, wil ik je achterlaten met een aantal extra voorbeelden die echt variaties zijn van waar we naar hebben gekeken. Als je de demo's bekijkt, zul je zien dat de benaderingen die we hier hebben behandeld superflexibel zijn en talloze ontwerpmogelijkheden bieden.

Volgende…

OK, dus we hebben puntladers besproken in dit artikel en spinners in het laatste. In het volgende artikel van deze vierdelige serie zullen we onze aandacht richten op een ander veelvoorkomend type lader: de tralies. We zullen veel van wat we tot nu toe hebben geleerd, bekijken hoe we ze kunnen uitbreiden om nog een lader met één element te maken met zo weinig code en zoveel mogelijk flexibiliteit.

---

Laders met één element: The Dots 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-dots/