Egyelemes rakodók: The Spinner

A csak CSS-t használó betöltők készítése az egyik kedvenc feladatom. Mindig öröm nézni ezeket a végtelen animációkat. És persze vannak sok technikák és megközelítések ezek elkészítéséhez – erre nincs szükség nézz tovább, mint a CodePen hogy lássuk, hányan. Ebben a cikkben azonban látni fogjuk, hogyan lehet egy elembetöltőt a lehető legkevesebb kódot írni.

Én több mint 500 single div rakodóból álló gyűjteményt készített és ebben a négy részes sorozatban megosztom azokat a trükköket, amelyekkel sokakat készítettem. Számos példával fogunk foglalkozni, bemutatva, hogy kis módosítások milyen szórakoztató variációkat eredményezhetnek, és milyen kevés kódot kell írnunk ahhoz, hogy mindez megtörténjen!

Ehhez az első cikkhez az egyik leggyakoribb rakodómintát fogjuk létrehozni: forgó rudak:

Íme a megközelítés

Ennek a betöltőnek egy triviális megvalósítása az, hogy minden egyes szülőelemen belüli sávhoz hozzon létre egy elemet (összesen kilenc elemhez), majd játsszon opacity és a transform hogy elérjük a pörgő hatást.

Az én megvalósításom azonban csak egy elemet igényel:

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

…és 10 CSS-deklaráció:

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

Bontsuk szét

Első pillantásra a kód furcsának tűnhet, de látni fogja, hogy egyszerűbb, mint gondolná. Az első lépés az elem méretének meghatározása. A mi esetünkben ez a 150px négyzet. rakhatunk aspect-ratio használni, így az elem mindentől függetlenül négyzet alakú marad.

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

A CSS-betöltők építésekor mindig megpróbálok egy értéket megadni a teljes méret szabályozására. Ebben az esetben ez a width és minden számításunk arra az értékre fog vonatkozni. Ez lehetővé teszi, hogy egyetlen értéket módosítsam a rakodó vezérléséhez. Mindig fontos, hogy könnyen beállíthassuk rakodóink méretét anélkül, hogy sok további értéket kellene beállítani.

Ezután gradienseket használunk a sávok létrehozásához. Ez a legbonyolultabb rész! Használjuk egy gradiens létrehozásához kettő az alábbiakhoz hasonló sávok:

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

A színátmenetünket egy szín és két színstop határozza meg. Az eredmény egyszínű, fakulás vagy átmenet nélkül. A mérete egyenlő 34% széles és 8% magas. Szintén középen van elhelyezve (50%). A trükk a kulcsszó értékének használata space — ez megkettőzi a gradienst, így két teljes sávot kapunk.

Tól től a specifikációt:

A kép annyiszor megismétlődik, ahányszor elfér a háttérpozicionálási területen, anélkül, hogy levágásra kerülne, majd a képek el vannak osztva, hogy kitöltsék a területet. Az első és az utolsó kép érinti a terület széleit.

egyenlő szélességet használok 34% ami azt jelenti, hogy nem lehet kettőnél több sáv (3*34% nagyobb, mint 100%) de két ütemnél üresek lesznek (100% - 2 * 34% = 32%). Ez a hely a két rúd között középen helyezkedik el. Más szóval, a közötti színátmenet szélességét használjuk 33% és a 50% hogy legalább két rúd legyen, köztük egy kis hely. Az érték space az, ami helyesen helyezi el őket számunkra.

Ugyanezt tesszük, és készítünk egy második hasonló gradienst, hogy két további sávot kapjunk felül és alul, ami egy background ingatlan értéke:

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

Ezt egy CSS-változó használatával optimalizálhatjuk az ismétlődés elkerülése érdekében:

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

Így most négy sáv áll rendelkezésünkre, és a CSS-változóknak köszönhetően egyszer felírhatjuk a színértéket, ami megkönnyíti a későbbi frissítést (mint ahogyan a betöltő méreténél is tettük).

A fennmaradó sávok létrehozásához érintsük meg a .loader elem és annak ::before pszeudoelem, hogy további négy ütemet kapjunk, összesen nyolcat.

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

Vegye figyelembe a használatát display: grid. Ez lehetővé teszi számunkra, hogy a rács alapértelmezett értékére hagyatkozzunk stretch igazítás, hogy a pszeudoelem lefedje szülőjének teljes területét; így nem szükséges dimenziót megadni rajta – egy újabb trükk, amely csökkenti a kódot, és elkerüli, hogy sok értékkel foglalkozzunk!

Most forgassuk el a pszeudoelemet 45deg a fennmaradó rudak elhelyezéséhez. A trükk megtekintéséhez vigye az egérmutatót a következő bemutatóra:

Az átlátszóság beállítása

Arra törekszünk, hogy azt a benyomást keltsük, hogy van egy rúd, amely elhalványuló rudak nyomát hagyja maga mögött, miközben körkörös úton halad. Most arra van szükségünk, hogy játsszunk a sávjaink átláthatóságával, hogy elérjük ezt a nyomvonalat, amit a CSS-sel fogunk megtenni. mask kúpos gradienssel kombinálva az alábbiak szerint:

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

Hogy jobban lássuk a trükköt, alkalmazzuk ezt egy színes dobozra:

A vörös szín átlátszósága az óramutató járásával megegyező irányban fokozatosan növekszik. Ezt alkalmazzuk a rakodógépünkön, és különböző átlátszatlanságú rudak vannak:

A valóságban úgy tűnik, hogy minden sáv elhalványul, mert színátmenet takarja el, és két félig átlátszó szín közé esik. Alig észrevehető, amikor ez fut, tehát olyan, mintha azt mondanánk, hogy az összes sáv azonos színű, és eltérő az átlátszatlansága.

A forgás

Alkalmazzunk egy forgási animációt, hogy megkapjuk a rakodót. Megjegyzendő, hogy lépcsőzetes animációra van szükségünk és nem folyamatosra, ezért használom steps(8). 8 nem más, mint a rudak száma, így ez az érték a használatban lévő sávok számától függően változtatható.

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

Ez az! A betöltőnk csak egy elemmel és néhány soros CSS-szel rendelkezik. Méretét és színét egyszerűen szabályozhatjuk egy érték beállításával.

Mivel mi csak a ::before pszeudoelem, akkor a használatával további négy sávot adhatunk hozzá ::after hogy a végén összesen 12 vonal és majdnem ugyanaz a kód:

Frissítjük pszeudoelemeink forgását, hogy fontolóra vegyük 30deg és a 60deg helyett 45deg tizenkét lépésből álló animáció használata közben nyolc helyett. A magasságot is csökkentettem 5% helyett 8% hogy a rudak egy kicsit vékonyabbak legyenek.

Vegyük észre azt is, hogy van grid-area: 1/1 az álelemeken. Ez lehetővé teszi, hogy ugyanazon a területen helyezzük el őket, egymásra rakva.

Találd ki? Ugyanazt a betöltőt egy másik megvalósítással érhetjük el:

Meg tudod találni a kód mögött meghúzódó logikát? Íme egy tipp: az átlátszatlanságot már nem kezelik CSS-sel mask hanem a színátmeneten belül, és szintén használja a opacity ingatlan.

Miért nem pontok helyett?

Ezt teljes mértékben megtehetjük:

Ha ellenőrzi a kódot, látni fogja, hogy most radiális gradienssel dolgozunk lineáris helyett. Egyébként a koncepció pontosan ugyanaz, ahol a maszk az átlátszatlanság benyomását kelti, de a formákat vonalak helyett körként készítettük.

Az alábbi ábra szemlélteti az új gradiens konfigurációt:

Ha Safarit használ, vegye figyelembe, hogy a demó hibás lehet. Ennek az az oka, hogy a Safari jelenleg nem támogatja a at szintaxis sugárirányú gradiensekben. De egy kicsit átkonfigurálhatjuk a gradienst, hogy ezt leküzdjük:

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

További betöltő példák

Íme egy másik ötlet az előzőhöz hasonló pergető rakodóhoz.

Ebben az esetben csak erre támaszkodom background és a mask az alakzat létrehozásához (nincs szükség pszeudoelemekre). A konfigurációt CSS-változókkal is definiálom, hogy sok variációt tudjunk létrehozni ugyanabból a kódból – egy újabb példa a CSS-változók erejére. Írtam egy másik cikket erről a technikáról ha további részletekre vágyik.

Vegye figyelembe, hogy egyes böngészők továbbra is a -webkit- előtagja mask-composite saját értékkészletével, és nem jeleníti meg a pörgőt a bemutatóban. Itt van egy módja ennek nélkül mast-composite további böngészőtámogatásért.

Van még egy számodra:

Ehhez az a background-color a szín szabályozására és használatára mask és a mask-composite a végső forma létrehozásához:

Mielőtt befejeznénk, itt van még néhány forgó rakodó, amit régebben készítettem. Különböző technikákra támaszkodom, de továbbra is használok színátmeneteket, maszkokat, álelemeket stb. Jó gyakorlat lehet mindegyik logikáját kitalálni, és egyben új trükköket tanulni. Ez azt jelenti, hogy ha bármilyen kérdése van velük kapcsolatban, a megjegyzés szakasz lent található.

Csomagolta

Látod, annyi mindent tehetünk a CSS-ben egyetlen div-vel, néhány színátmenettel, pszeudoelemekkel, változókkal. Úgy tűnik, egy csomó különböző forgó rakodót hoztunk létre, de alapvetően mindegyik ugyanaz, kis módosításokkal.

Ez még csak a kezdet. Ebben a sorozatban további ötleteket és fejlettebb koncepciókat fogunk megvizsgálni a CSS-betöltők létrehozásához.

---

Egyelemes rakodók: The Spinner 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ó.
• Source: https://css-tricks.com/single-element-loaders-the-spinner/