Egyelemes rakodók: A rudak

Megnéztük a fonókat. Megnéztük a pontokat. Most egy másik gyakori mintával foglalkozunk a rakodók számára: bárok. A sorozat e harmadik cikkében ugyanazt fogjuk megtenni, mint a többiben, egyetlen elemből és rugalmas CSS-szel, amely megkönnyíti a változatok létrehozását.

Kezdjük nem egy, nem kettő, hanem 20 rúdrakodó példával.

Mit?! Mindegyiket részletezi? Ez túl sok egy cikkhez!

Első pillantásra annak tűnhet! De mindegyik ugyanarra a kódstruktúrára támaszkodik, és csak néhány értéket frissítünk a változatok létrehozásához. Ez a CSS minden ereje. Nem tanuljuk meg, hogyan kell egyetlen betöltőt létrehozni, de különböző technikákat tanulunk, amelyek lehetővé teszik, hogy annyi betöltőt hozzunk létre, amennyit csak akarunk, pusztán ugyanazzal a kódszerkezettel.

Készítsünk néhány rudat!

Kezdjük a méretek meghatározásával width (Vagy height) A aspect-ratio az arány megtartásához:

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

Három sávot „hamisítunk”, lineáris színátmenettel a háttérben – nagyon hasonló ahhoz, ahogyan a sorozat 2. részében készítettünk pontbetöltőket.

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

A fenti kód a következő eredményt adja:

A sorozat többi cikkéhez hasonlóan mi is sok mindennel fogunk foglalkozni background trükk. Tehát, ha úgy érzi, hogy túl gyorsan ugrálunk, vagy úgy érzi, hogy egy kis részletre van szüksége, kérjük, nézze meg ezeket. Az enyémet is elolvashatod Stack Overflow válasz ott, ahol adok részletes magyarázatot hogy mindez hogyan működik.

A bárok animálása

A rúdbetöltő létrehozásához animáljuk az elem méretét vagy helyzetét. Animáljuk a méretet a következő animációs kulcskockák meghatározásával:

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

Látod, mi történik ott? 0% és 100% között az animáció megváltoztatja a background-size az elem háttér gradiensétől. Minden kulcskép három háttérméretet állít be (egyet minden színátmenethez).

És itt van, amit kapunk:

El tudod képzelni az összes lehetséges variációt, amit kaphatunk, ha különböző animációs konfigurációkkal játszunk a méretekhez vagy pozíciókhoz?

Javítsuk a méretet 20% 50% és ezúttal frissítsd a pozíciókat:

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

…amitől kapunk egy újabb rakodót!

Valószínűleg már megvan a trükk. Mindössze egy idővonalat kell megadnia, amelyet kulcskockává alakít. A méret, a pozíció – vagy mindkettő – animálásával! — végtelen számú rakodási lehetőség van a keze ügyében.

És ha már megszoktuk ezt a technikát, tovább léphetünk, és egy bonyolultabb színátmenetet használhatunk az egyenletes kialakításhoz több rakodók.

A demó utolsó két példájában az összes sávbetöltő ugyanazt a mögöttes jelölést és stílust, valamint az animációk különböző kombinációit használja. Nyissa meg a kódot, és próbáljon meg minden egyes keretet egymástól függetlenül megjeleníteni; látni fogod, milyen relatíve triviális tucatnyit készíteni – ha nem százakat - a változatok.

Egyre divatos

Emlékeztek arra a maszktrükkre, amelyet a beépített pontbetöltőkkel csináltunk? a sorozat második cikke? Itt is megtehetjük ugyanezt!

Ha az összes fenti logikát alkalmazzuk a mask bármilyen háttérkonfigurációt használhatunk, hogy díszes színezést adjunk rakodóinknak.

Vegyünk egy demót, és frissítsük:

Csak annyit tettem, hogy frissítettem az összeset background-* val vel mask-* és színátmenetes színezést adtam hozzá. Ilyen egyszerű, és mégis kapunk egy másik menő rakodót.

Tehát nincs különbség a pontok és a sávok között?

Semmi különbség! Két különböző cikket írtam, hogy a lehető legtöbb példát lefedjem, de mindkettőben ugyanazokra a technikákra támaszkodom:

1. Színátmenetek az alakzatok létrehozásához (pontok vagy sávok vagy esetleg valami más)
2. Animálás background-size és / vagy background-position a betöltő animáció létrehozásához
3. Maszk hozzáadása a színek hozzáadásához

A rudak lekerekítése

Ezúttal próbáljunk ki valami mást, ahol lekerekíthetjük rúd széleit.

Egy elem használata és annak ::before és a ::after pszeudók esetén három azonos sávot határozunk meg:

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

Ez három sávot ad, ezúttal anélkül, hogy lineáris gradiensre támaszkodnánk:

Most az a trükk, hogy ezeket a sávokat szép színátmenettel töltsük ki. A folytonos gradiens szimulálásához játszanunk kell vele background tulajdonságait. A fenti ábrán a zöld terület határozza meg a rakodó által lefedett területet. Ennek a területnek meg kell egyeznie a gradiens méretével, és ha kiszámoljuk, akkor ez egyenlő a két címkével ellátott oldal megszorzásával S ábrán, ill background-size: var(--s) var(--s).

Mivel az elemeink egyenként vannak elhelyezve, mindegyiken belül frissítenünk kell a színátmenet helyzetét, hogy megbizonyosodjunk arról, hogy mindegyik átfedi egymást. Ily módon egy folytonos gradienst szimulálunk, pedig valójában három.

A (középen elhelyezett) fő elemnél a háttérnek középen kell lennie. A következőket használjuk:

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

A bal oldali pszeudoelemhez a bal oldali háttérre van szükségünk

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

A jobb oldali pszeudóhoz pedig a hátteret jobbra kell helyezni:

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

Ugyanazt a CSS-változót használva, --_i, amelyet a fordításhoz használtunk, a kódot így írhatjuk:

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

Most már csak annyit kell tennünk, hogy animáljuk a magasságot, és adjunk hozzá néhány késést! Íme három példa, ahol csak a színek és a méretek különböznek:

Csomagolta

Remélem, hogy eddig rendkívül bátorítónak érzi magát minden erőtől, amellyel összetett megjelenésű betöltési animációkat készíthet. Csak egy elemre van szükségünk, vagy színátmenetekre vagy pszeudókra a sávok megrajzolásához, majd néhány kulcskockára a dolgok mozgatásához. Ez az egész recept a végtelen számú lehetőség megszerzéséhez, úgyhogy menj ki és kezdj el valami finomat főzni!

A következő cikkig meghagyok nektek egy vicces rakodógyűjteményt, ahol kombinálom a pontokat és a a rácsokat!

---

Egyelemes rakodók: A rudak eredetileg megjelent CSS-trükkök. Neked kellene kapja meg a hírlevelet.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://css-tricks.com/single-element-loaders-the-bars/