CSS Loader generátor

Mi ez az eszköz?

A CSS loader egy kis animált elem — forgó gyűrű, pattogó pontok, lüktető kör vagy mozgó haladássáv —, amelyet annak jelzésére használnak, hogy tartalom töltődik, JavaScript animációs ciklus és kép vagy GIF nélkül. Néhány CSS szabályból épül fel, plusz egy @keyframes blokkból, amely meghatározza, hogyan mozog az elem az idő során.

Ez az eszköz négy gyakori loader mintát generál valódi, működő CSS-sel: egy forgó, keretalapú spinnert, három pontot, amelyek sorban pattognak, egy ki-be lüktető kört, és egy sávot csúszó kitöltéssel. Állítsd be a méretet, színt és animáció-időtartamot az élő előnézeten, majd másold ki a generált CSS-t és a minimális HTML elemet, amelyre alkalmazandó.

Forrás: CSS Animations Level 1, W3C — a specifikáció, amely definiálja a @keyframes-t és az animációs tulajdonságokat, amelyekből ezek a loaderek épülnek.

Miért érdemes használni?

• Az élő előnézet valós időben animál, ahogy változtatod a stílust, méretet, színt vagy sebességet — pontosan azt látod, amit ki fogsz adni.
• A teljes CSS-t legenerálja, beleértve a @keyframes blokkot, nem csak egy töredéket, amit magadnak kellene befejezni.
• A pontos HTML jelölést is kiadja, amit a CSS elvár, így nem kell találgatni az osztálynevekről vagy elemszerkezetről.
• Négy különálló animációs minta (spinner, pontok, lüktetés, sáv) fedi le a leggyakoribb betöltési állapot felhasználási eseteket.
• Tiszta CSS animáció — nincs JavaScript, nincsenek képfájlok, kisebb és simább, mint egy animált GIF.
• Teljes egészében a böngésződben fut, ingyenes, nincs regisztráció.

Használati útmutató

1. Válassz loader stílust: forgó gyűrű, pattogó pontok, lüktető kör vagy haladássáv.
2. Húzd a méretcsúszkát a loader nagyítására vagy kicsinyítésére.
3. Válassz színt — ez lesz a loader kiemelőszíne (a forgó keret, a pontok vagy a sáv kitöltése).
4. Állítsd be a sebességet, hogy gyorsabb vagy lassabb legyen az animáció; a legtöbb UI loader 0,6 és 1,5 másodperc közötti ciklusidőnél hat legjobban.
5. Másold be a generált CSS-t a stíluslapodba, és illeszd be a HTML részletet, ahol csak meg kell jelennie a loadernek.

Példa

Bemenet

Stílus: forgó gyűrű · Méret: 40px · Szín: narancssárga · Sebesség: 1,0s

Kimenet

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Egy klasszikus gyűrű spinner: egy kör, amelynek három oldalán majdnem átlátszó, negyedik oldalán tömör színű a kerete, folyamatosan forgatva egy lineáris, végtelen animációval.

Miért CSS loadereket használj animált GIF-ek helyett

Az animált GIF spinnerek évekig alapértelmezettek voltak, de ma egy CSS loader szinte mindig a jobb választás: néhány száz bájtnyi szöveg egy bináris képfájl helyett, bármilyen méretre skálázódik pixelesedés nélkül, mivel keretekkel és transzformációkkal van rajzolva, és a színe azonnal módosítható egyetlen CSS változóval, ahelyett hogy újra kellene exportálni egy új képet.

Az itt található négy stílus — spinner, pontok, lüktetés, sáv — azok is, amelyek leggyakrabban jelennek meg valódi felületeken, a gomb betöltési állapotoktól a teljes oldalas overlay-kig. Mindegyik csak transform és opacity változásokat használ a keyframes-eiben, amit a böngészők simán tudnak animálni a GPU-n anélkül, hogy akadoztatnák az oldal többi részét.

Stílus választása a helyzethez

• Forgó gyűrű: a legsemlegesebb, általános célú választás — jól működik gombokon belül és kis, soron belüli betöltési állapotoknál.
• Pattogó pontok: könnyedebbnek és játékosabbnak hat; gyakori chat 'gépel...' jelzéseknél és rövid várakozásoknál.
• Lüktető kör: jó egyetlen elemes betöltésjelzőnek, vagy 'aktív/élő' állapotjelző pontként.
• Haladássáv: előrehaladást sugall, és gyakran ezt várják el oldalbetöltéseknél vagy többlépéses folyamatoknál, még pontos százalék nélkül is.

A loader használata a projektedben

Illeszd be a generált CSS-t egyszer a stíluslapodba, majd használd újra a HTML részletet bárhol, ahol betöltési állapotra van szükséged — egy gombon belül, amíg egy űrlap elküldődik, egy kártya fölött, amíg adat töltődik, vagy középre igazítva egy teljes oldalas overlay-ben. Mivel az animáció tiszta CSS, a be- és kikapcsolása olyan egyszerű, mint az elem hozzáadása vagy eltávolítása a DOM-ból, vagy elrejtése display: none-nal.

→ Box Shadow Generátor · CSS Minifier

Gyakori kérdések