Încărcătoare cu un singur element: punctele

Ne uităm la încărcătoarele din această serie. Mai mult decât atât, defalcăm câteva modele comune de încărcare și cum să le recreăm cu nimic mai mult decât un singur div. Până acum, ne-am despărțit încărcătorul clasic de filare. Acum, să ne uităm la altul de care probabil știți bine: punctele.

Încărcătoarele cu puncte sunt peste tot. Sunt îngrijite pentru că de obicei sunt formate din trei puncte care arată ca o elipsă de text (...) care dansează în jur.

Scopul nostru aici este să facem același lucru dintr-un singur element div. Cu alte cuvinte, nu există un singur div per punct sau animații individuale pentru fiecare punct.

Acest exemplu de încărcare de mai sus este realizat cu un singur element div, câteva declarații CSS și fără pseudo-elemente. Combin două tehnici folosind CSS background și mask. Și când terminăm, vom vedea cum animarea unui gradient de fundal ajută la crearea iluziei că fiecare punct își schimbă culorile pe măsură ce se mișcă în sus și în jos succesiv.

Animația de fundal

Să începem cu animația de fundal:

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

Sper că acest lucru pare destul de simplu. Ceea ce avem este un 180pxlat .loader element care afișează două degrade conice care prezintă opriri de culoare dure între două culori fiecare - primul gradient este roșu și albastru de-a lungul jumătății superioare a .loader, iar al doilea gradient este verde și violet de-a lungul jumătății inferioare.

Modul în care este dimensionat fundalul încărcării (200% lat), vedem doar una dintre acele culori în fiecare jumătate odată. Apoi avem această mică animație care împinge poziția acelor degrade de fundal la stânga, la dreapta și înapoi pentru totdeauna.

Când aveți de-a face cu proprietățile de fundal - în special background-position — Mă refer mereu la al meu Răspunsul Stack Overflow unde dau o explicație detaliată despre cum funcționează toate acestea. Dacă nu sunteți confortabil cu trucurile de fundal CSS, vă recomand să citiți acest răspuns pentru a vă ajuta cu ceea ce urmează.

În animație, observați că primul strat este Y=0% (asezat sus) in timp ce X este modificări de la 0% la 100%. Pentru al doilea strat, avem același lucru pentru X dar Y=100% (asezat in partea de jos).

De ce folosirea unui conic-gradient() în loc de linear-gradient()?

Buna intrebare! Intuitiv, ar trebui să folosim un gradient liniar pentru a crea un gradient de două culori ca acesta:

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

Dar putem ajunge la același lucru folosind a conic-gradient() — și cu mai puțin cod. Reducem codul și, de asemenea, învățăm un nou truc în acest proces!

Glisarea culorilor la stânga și la dreapta este o modalitate bună de a face să pară că schimbăm culorile, dar ar putea fi mai bine dacă schimbăm instantaneu culorile - în acest fel, nu există nicio șansă ca un punct de încărcare să clipească două culori în același timp . Pentru a face acest lucru, să schimbăm animationfuncția de sincronizare a lui de la linear la steps(1)

Punctele de încărcare

Dacă ai urmat împreună cu primul articol din această serie, pun pariu că știi ce urmează: Măști CSS! Ceea ce face că măștile sunt atât de grozave este că ne lasă cumva „decupează” părți ale unui fundal sub forma unui alt element. Deci, în acest caz, dorim să facem câteva puncte, să arătăm gradienții de fundal prin puncte și să decupăm orice părți ale fundalului care nu fac parte dintr-un punct.

Vom folosi radial-gradient() pentru aceasta:

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

Există un cod duplicat acolo, așa că hai să facem o variabilă CSS pentru a reduce lucrurile:

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

Foarte tare. Dar acum avem nevoie de o nouă animație care ajută la mutarea punctelor în sus și în jos între gradienții animați.

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

Da, este un total de trei gradienți radiali acolo, toți cu aceeași configurație și aceeași dimensiune - animația va actualiza poziția fiecăruia. Rețineți că X coordonata fiecărui punct este fixă. The mask-position este definit astfel încât primul punct să fie în stânga (0%), al doilea în centru (50%), iar al treilea la dreapta (100%). Actualizăm doar Y coordona de la 0% la 100% pentru a face să danseze punctele.

Iată ce primim:

Acum, combină asta cu animația noastră în gradient și magia începe să se întâmple:

Variații de încărcare cu puncte

Variabila CSS pe care am făcut-o în ultimul exemplu face ca totul să fie mult mai ușor de schimbat în culori noi și de a crea mai multe variații ale aceluiași încărcător. De exemplu, diferite culori și dimensiuni:

Dar o altă mișcare pentru punctele noastre?

Aici, tot ce am făcut a fost să actualizez animația pentru a lua în considerare diferite poziții și obținem un alt încărcător cu aceeași structură de cod!

Tehnica de animație pe care am folosit-o pentru straturile de mască poate fi folosită și cu straturi de fundal pentru a crea o mulțime de încărcătoare diferite cu o singură culoare. Am scris un articol detaliat despre asta. Veți vedea că din aceeași structură de cod putem crea diferite variații prin simpla modificare a câtorva valori. Vă împărtășesc câteva exemple la sfârșitul articolului.

De ce nu un încărcător cu un punct?

Acesta ar trebui să fie destul de ușor de folosit, deoarece folosesc aceeași tehnică, dar cu o logică mai simplă:

Iată un alt exemplu de încărcător în care și eu animez radial-gradient combinate cu Filtre CSS și mix-blend-mode pentru a crea un efect blobby:

Dacă verificați codul, veți vedea că tot ceea ce fac acolo este să animez background-position, exact așa cum am făcut cu încărcătorul anterior, dar adăugând o picătură de background-size pentru a face să pară ca blob-ul devine mai mare pe măsură ce absoarbe puncte.

Dacă doriți să înțelegeți magia din spatele acestui efect blob, vă puteți referi la aceste diapozitive interactive (doar Chrome) de Ana Tudor pentru că ea acoperă subiectul atât de bine!

Iată o altă idee de încărcare de puncte, de data aceasta folosind o tehnică diferită:

Acesta este doar 10 declarații CSS și un cadru cheie. Elementul principal și cele două pseudo-elemente ale sale au aceeași configurație de fundal cu un gradient radial. Fiecare creează un punct, pentru un total de trei. Animația mută gradientul de sus în jos folosind diferite întârzieri pentru fiecare punct.

Ah, și țineți cont de modul în care această demonstrație folosește CSS Grid. Acest lucru ne permite să folosim valorile implicite ale rețelei stretch aliniere astfel încât ambele pseudo-elemente să acopere întreaga zonă a părintelui lor. Nu este nevoie de dimensionare! Împingeți puțin cu translate() și suntem cu toții pregătiți.

Mai multe exemple!

Doar pentru a conduce la idee, vreau să vă las cu o grămadă de exemple suplimentare care sunt într-adevăr variații ale ceea ce ne-am uitat. Pe măsură ce vizualizați demonstrațiile, veți vedea că abordările pe care le-am acoperit aici sunt super flexibile și deschid o mulțime de posibilități de design.

Urmatorul…

OK, așa că am acoperit încărcătoarele cu puncte în acest articol și spinnerele în ultimul. În următorul articol din această serie de patru părți, ne vom îndrepta atenția către un alt tip comun de încărcător: barurile. Vom lua multe din ceea ce am învățat până acum și vom vedea cum le putem extinde pentru a crea încă un încărcător cu un singur element cu cât mai puțin cod și cât mai multă flexibilitate posibil.

---

Încărcătoare cu un singur element: punctele publicat inițial pe CSS-trucuri. Tu ar trebui primiți buletinul informativ.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Source: https://css-tricks.com/single-element-loaders-the-dots/