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

Ne-am uitat la filatori. Ne-am uitat la puncte. Acum vom aborda un alt model comun pentru încărcătoare: baruri. Și vom face același lucru în acest al treilea articol al seriei ca și celelalte, făcându-l cu un singur element și cu CSS flexibil, care facilitează crearea de variații.

Să începem cu nu unul, nu două, ci 20 de exemple de încărcătoare cu bare.

Ce?! Ai de gând să detaliezi fiecare dintre ele? E prea mult pentru un articol!

Ar putea părea așa la prima vedere! Dar toate se bazează pe aceeași structură de cod și actualizăm doar câteva valori pentru a crea variații. Asta este toată puterea CSS. Nu învățăm cum să creăm un singur încărcător, dar învățăm tehnici diferite care ne permit să creăm cât de mult încărcător dorim folosind doar aceeași structură de cod.

Hai să facem niște batoane!

Începem prin a defini dimensiunile pentru ele folosind width (Sau height), Cu aspect-ratio a menține proporția:

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

Am „falsificat” trei bare cu un gradient liniar pe fundal – foarte asemănător cu modul în care am creat încărcătoarele de puncte în partea 2 a acestei serii.

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

Codul de mai sus ne va da următorul rezultat:

Ca și celelalte articole din această serie, ne vom ocupa de multe background smecherie. Așadar, dacă simțiți vreodată că sărim prea repede sau simțiți că aveți nevoie de mai multe detalii, vă rugăm să le verificați. Poți să-mi citești și al meu Stack Overflow răspuns unde dau o explicație detaliată despre cum funcționează toate acestea.

Animarea barelor

Fie animăm dimensiunea sau poziția elementului pentru a crea încărcătorul de bare. Să animăm dimensiunea definind următoarele cadre cheie de animație:

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

Vezi ce se întâmplă acolo? Între 0% și 100%, animația schimbă background-size a gradientului de fundal al elementului. Fiecare cadru cheie setează trei dimensiuni de fundal (una pentru fiecare gradient).

Și iată ce obținem:

Puteți începe să vă imaginați toate variațiile posibile pe care le putem obține jucându-vă cu diferite configurații de animație pentru dimensiuni sau poziții?

Să fixăm dimensiunea la 20% 50% și actualizați pozițiile de data aceasta:

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

… ceea ce ne aduce un alt încărcător!

Probabil că ai înțeles trucul până acum. Tot ce aveți nevoie este să definiți o cronologie pe care o traduceți într-un cadru cheie. Prin animarea dimensiunii, a poziției - sau ambele! — există un număr infinit de posibilități de încărcare la îndemână.

Și odată ce ne simțim confortabil cu o astfel de tehnică, putem merge mai departe și putem folosi un gradient mai complex pentru a crea uniform mai mult încărcătoare.

Așteptați-vă pentru ultimele două exemple din acea demonstrație, toate încărcătoarele de bare folosesc același marcaj și stiluri de bază și combinații diferite de animații. Deschideți codul și încercați să vizualizați fiecare cadru independent; vei vedea cât de relativ banal este să faci zeci - dacă nu sute — a variațiilor.

Devin fantezist

Ți-ai amintit trucul cu mască pe care l-am făcut cu încărcătorul de puncte? al doilea articol al acestei serii? Putem face același lucru aici!

Dacă aplicăm toată logica de mai sus în interiorul mask proprietate putem folosi orice configurație de fundal pentru a adăuga o colorare fantezică încărcătoarelor noastre.

Să luăm o demonstrație și să o actualizăm:

Tot ce am făcut a fost să actualizez toate background-* cu mask-* și am adăugat o colorare în gradient. La fel de simplu și totuși obținem un alt încărcător cool.

Deci nu există nicio diferență între puncte și bare?

Nicio diferenta! Am scris două articole diferite pentru a acoperi cât mai multe exemple posibil, dar în ambele, mă bazez pe aceleași tehnici:

1. Gradienți pentru a crea formele (puncte sau bare sau poate altceva)
2. Animarea background-size şi / sau background-position pentru a crea animația de încărcare
3. Adăugarea măștii pentru a adăuga o notă de culoare

Rotunjirea gratiilor

Să încercăm ceva diferit de data aceasta, unde putem rotunji marginile barurilor noastre.

Utilizarea unui element și a acestuia ::before și ::after pseudo, definim trei bare identice:

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

Asta ne oferă trei bare, de data aceasta fără a ne baza pe un gradient liniar:

Acum trucul este să completați acele bare cu un gradient minunat. Pentru a simula un gradient continuu, trebuie să ne jucăm cu el background proprietăți. În figura de mai sus, zona verde definește zona acoperită de încărcător. Acea zonă ar trebui să fie de dimensiunea gradientului și, dacă facem calculul, este egală cu înmulțirea ambelor părți etichetate S în diagramă, sau background-size: var(--s) var(--s).

Deoarece elementele noastre sunt plasate individual, trebuie să actualizăm poziția gradientului în interiorul fiecăruia pentru a ne asigura că toate se suprapun. În acest fel, simulăm un gradient continuu, chiar dacă este într-adevăr trei dintre ele.

Pentru elementul principal (plasat în centru), fundalul trebuie să fie în centru. Folosim următoarele:

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

Pentru pseudo-elementul din stânga, avem nevoie de fundalul din stânga

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

Și pentru pseudo-ul din dreapta, fundalul trebuie să fie poziționat la dreapta:

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

Folosind aceeași variabilă CSS, --_i, pe care l-am folosit pentru traducere, putem scrie codul astfel:

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

Acum, tot ce trebuie să facem este să animam înălțimea și să adăugăm câteva întârzieri! Iată trei exemple în care tot ceea ce diferă sunt culorile și dimensiunile:

La finalul

Sper că până acum te simți super încurajat de toate puterile pe care le ai pentru a face animații de încărcare cu aspect complex. Tot ce ne trebuie este un element, fie gradienți, fie pseudo-uri pentru a desena barele, apoi niște cadre cheie pentru a muta lucrurile. Aceasta este întreaga rețetă pentru a obține un număr nesfârșit de posibilități, așa că ieșiți și începeți să gătiți niște chestii frumoase!

Până la următorul articol, vă las cu o colecție amuzantă de încărcătoare în care combin punctele și barurile!

---

Încărcătoare cu un singur element: Barele 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ă.
• Sursa: https://css-tricks.com/single-element-loaders-the-bars/