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

Realizarea încărcătoarelor numai CSS este una dintre sarcinile mele preferate. Este întotdeauna satisfăcător să te uiți la acele animații infinite. Și, desigur, există loturi de tehnici și abordări pentru a le realiza — nu este nevoie caută mai departe decât CodePen sa vad cati. În acest articol, totuși, vom vedea cum să facem ca un singur element de încărcare să scrie cât mai puțin cod posibil.

Am a făcut o colecție de peste 500 de încărcătoare single div și în această serie de patru părți, voi împărtăși trucurile pe care le-am folosit pentru a crea multe dintre ele. Vom acoperi un număr mare de exemple, arătând cum micile ajustări pot duce la variații distractive și cât de puțin cod trebuie să scriem pentru a face totul să se întâmple!

Pentru acest prim articol, vom crea unul dintre cele mai comune modele de încărcare: bare rotative:

Iată abordarea

O implementare banală pentru acest încărcător este de a crea un element pentru fiecare bară înfășurată în interiorul unui element părinte (pentru nouă elemente în total), apoi să te joci cu opacity și transform pentru a obține efectul de filare.

Cu toate acestea, implementarea mea necesită un singur element:

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

… și 10 declarații CSS:

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

Să descompunem asta

La prima vedere, codul poate părea ciudat, dar vei vedea că este mai simplu decât ai putea crede. Primul pas este definirea dimensiunii elementului. În cazul nostru, este un 150px pătrat. Putem pune aspect-ratio de folosit astfel încât elementul să rămână pătrat indiferent de ce.

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

Când construiesc încărcătoare CSS, încerc întotdeauna să am o singură valoare pentru a controla dimensiunea totală. În acest caz, este vorba de width iar toate calculele pe care le acoperim se vor referi la acea valoare. Acest lucru îmi permite să schimb o singură valoare pentru a controla încărcătorul. Este întotdeauna important să putem ajusta cu ușurință dimensiunea încărcătoarelor noastre, fără a fi nevoie să ajustam o mulțime de valori suplimentare.

În continuare, vom folosi degrade pentru a crea barele. Aceasta este partea cea mai dificilă! Să folosim unu gradient de creat Două bare ca cele de mai jos:

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

Gradientul nostru este definit cu o culoare și două opriri de culoare. Rezultatul este o culoare solidă, fără decolorare sau tranziții. Mărimea este egală cu 34% larg și 8% înalt. De asemenea, este plasat în centru (50%). Trucul este folosirea valorii cuvântului cheie space — aceasta dublează gradientul, oferindu-ne două bare totale.

De la caietul de sarcini:

Imaginea se repetă de câte ori se încadrează în zona de poziționare a fundalului fără a fi tăiată și apoi imaginile sunt distanțate pentru a umple zona. Prima și ultima imagine ating marginile zonei.

Folosesc o lățime egală cu 34% ceea ce înseamnă că nu putem avea mai mult de două bare (3*34% este mai mare decât 100%) dar cu două bare vom avea spații goale (100% - 2 * 34% = 32%). Acel spațiu este plasat în centru între cele două bare. Cu alte cuvinte, folosim o lățime pentru gradientul care se află între 33% și 50% pentru a ne asigura că avem cel puțin două bare cu puțin spațiu între ele. Valoarea space este ceea ce ni le plasează corect.

Facem același lucru și facem un al doilea gradient similar pentru a obține încă două bare în partea de sus și de jos, care ne oferă o background valoarea proprietatii de:

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

Putem optimiza asta folosind o variabilă CSS pentru a evita repetarea:

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

Deci, acum avem patru bare și, mulțumită variabilelor CSS, putem scrie valoarea culorii o dată, ceea ce ușurează actualizarea ulterioară (cum am făcut cu dimensiunea încărctorului).

Pentru a crea barele rămase, să accesăm .loader elementul și al acestuia ::before pseudo-element pentru a obține încă patru batoane pentru un total mare de opt în total.

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

Observați utilizarea display: grid. Acest lucru ne permite să ne bazăm pe valoarea implicită a rețelei stretch aliniere pentru a face pseudo-elementul să acopere întreaga zonă a părintelui său; astfel nu este nevoie să specificați o dimensiune pe ea - un alt truc care reduce codul și ne evită să ne ocupăm de o mulțime de valori!

Acum să rotim pseudo-elementul cu 45deg pentru a poziționa barele rămase. Treceți cu mouse-ul pe următorul demo pentru a vedea trucul:

Setarea opacității

Ceea ce încercăm să facem este să creăm impresia că există o bară care lasă în spate o urmă de bare care se estompează pe măsură ce parcurge o cale circulară. Ceea ce avem nevoie acum este să ne jucăm cu transparența barelor noastre pentru a face acel traseu, ceea ce o să facem cu CSS mask combinat cu un gradient conic după cum urmează:

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

Pentru a vedea mai bine trucul, să aplicăm acest lucru pe o cutie colorată:

Transparența culorii roșii crește treptat în sensul acelor de ceasornic. Aplicam acest lucru pe încărcătorul nostru și avem barele cu opacitate diferită:

În realitate, fiecare bară pare să se estompeze deoarece este mascată de un gradient și se încadrează între două culori semi-transparente. Nu se observă cu greu atunci când rulează, așa că este ca și cum ai putea spune că toate barele au aceeași culoare cu un nivel diferit de opacitate.

Rotația

Să aplicăm o animație de rotație pentru a obține încărcătorul nostru. Rețineți că avem nevoie de o animație în trepte și nu una continuă, de aceea folosesc steps(8). 8 nu este altceva decât numărul de bare, astfel încât această valoare poate fi schimbată în funcție de câte bare sunt utilizate.

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

Asta este! Avem încărcătorul nostru cu un singur element și câteva linii de CSS. Îi putem controla cu ușurință dimensiunea și culoarea prin ajustarea unei valori.

Din moment ce am folosit doar ::before pseudo-element, putem adăuga încă patru bare utilizând ::after pentru a termina cu 12 bare în total și aproape același cod:

Actualizăm rotația pseudo-elementelor noastre de luat în considerare 30deg și 60deg în loc de 45deg folosind o animație în doisprezece pași, mai degrabă decât opt. Am scăzut și înălțimea la 5% în loc de 8% pentru a face batoanele puțin mai subțiri.

Observați, de asemenea, că avem grid-area: 1/1 asupra pseudo-elementelor. Acest lucru ne permite să le plasăm unul peste altul în aceeași zonă, stivuite unul peste altul.

Ghici ce? Putem ajunge la același încărcător folosind o altă implementare:

Îți poți da seama logica din spatele codului? Iată un indiciu: opacitatea nu mai este gestionată cu un CSS mask dar în interiorul gradientului și folosește și opacity proprietate.

De ce nu punctele în schimb?

Putem face asta total:

Dacă verificați codul, veți vedea că acum lucrăm cu un gradient radial în loc de unul liniar. În rest, conceptul este exact același unde masca creează impresia de opacitate, dar am făcut formele ca cercuri în loc de linii.

Mai jos este o figură pentru a ilustra noua configurație de gradient:

Dacă utilizați Safari, rețineți că demonstrația poate avea erori. Asta pentru că Safari nu are în prezent suport pentru at sintaxă în gradienți radiali. Dar putem reconfigura puțin gradientul pentru a depăși asta:

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

Mai multe exemple de încărcător

Iată o altă idee pentru un încărcător spinner similar cu cel precedent.

Pentru aceasta, mă bazez doar pe background și mask pentru a crea forma (nu sunt necesare pseudo-elemente). De asemenea, definesc configurația cu variabile CSS pentru a putea crea o mulțime de variații din același cod - un alt exemplu de doar puterile variabilelor CSS. Am mai scris un articol despre această tehnică daca vrei mai multe detalii.

Rețineți că unele browsere se bazează în continuare pe a -webkit- prefix pentru mask-composite cu propriul set de valori și nu va afișa spinnerul în demonstrație. Iată o modalitate de a face acest lucru fără mast-composite pentru mai mult suport pentru browser.

Mai am unul pentru tine:

Pentru aceasta, folosesc un background-color pentru a controla culoarea și a utiliza mask și mask-composite pentru a crea forma finală:

Înainte de a încheia, iată mai multe încărcătoare rotative pe care le-am făcut cu ceva timp în urmă. Mă bazez pe diferite tehnici, dar încă folosesc gradienți, măști, pseudo-element etc. Ar putea fi un exercițiu bun pentru a descoperi logica fiecăruia și a învăța noi trucuri în același timp. Acestea fiind spuse, dacă aveți întrebări despre ei, secțiunea de comentarii este mai jos.

La finalul

Vezi, sunt atât de multe ce putem face în CSS cu nimic altceva decât un singur div, câțiva gradienți, pseudo-elemente, variabile. Se pare că am creat o grămadă de încărcătoare rotative diferite, dar toate sunt practic același lucru, cu mici modificări.

Acesta este doar începutul. În această serie, vom analiza mai multe idei și concepte avansate pentru crearea încărcătoarelor CSS.

---

Încărcătoare cu un singur element: Spinner 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-spinner/