CSS loader generátor
Ingyenes CSS loader generátor: tíz betöltésjelző tiszta CSS-ből, élő méret-, sebesség-, vastagság- és színbeállítással, valamint használatra kész HTML és CSS másolással.
Mit készít a CSS loader generátor?
Tiszta CSS-ből álló, animált betöltésjelzőket épít: pörgő, pontok, sávok, hullámgyűrű, impulzus, keringő, forduló, hullám, pattogó és színátmenetes gyűrű. Mindegyik a választott mérettel, sebességgel, vastagsággal és színnel készül, HTML plusz CSS formában másolható.
Kell a loaderhez JavaScript vagy kép?
Nem. Minden loader sima HTML elem, amelyet CSS keyframes animál. Nincs kép, ikonfont, könyvtár és futásidejű szkript — önmagában a CSS blokk is elég.
Hogyan tegyem fel a loadert az oldalamra?
Kattintson egy loaderre a rácsban, illessze be a HTML blokkot oda, ahol megjelenhet, a CSS blokkot pedig a stíluslapjába. A CSS önellátó, és tartalmazza a szükséges @keyframes szabályokat.
Mit változtat a négy paraméter?
A méret az összes loader szélességét-magasságát állítja, a sebesség az animáció időtartamát, a vastagság a kereteket és a sávok szélességét érinti, a szín pedig azonnal átfesti a rács és a kód minden elemét.
Miért nem animálódik a kimásolt loader?
Leggyakrabban azért, mert csak az osztályszabályok kerültek átmásolásra a @keyframes blokk nélkül, vagy az osztályt átnevezték a HTML-ben, de nem a CSS-ben. Mindkét blokkot változatlanul másolja, és ne módosítsa az osztályneveket.
Az animációk teljesítménye megfelelő?
Igen. Minden loader csak transformot és opacity-t animál — olyan tulajdonságokat, amelyeket a böngésző GPU-n komponál layout és festés nélkül, így több loader esetén is folyékony marad.
Akadálymentesek a loaderek?
A pörgők vizuális díszek, a képernyőolvasóknak szöveges jelzés segít. Tegyen egy rejtett „Betöltés” feliratot a loader mellé, vagy adjon a loadernek aria-hidden="true" attribútumot, és a haladást külön jelentse.
Küld adatot szerverre?
Nem. A generátor teljesen a böngészőjében fut. A beállításai soha nem hagyják el az oldalt, a generált kód pedig helyben készül az eszközén.
A(z) CSS loader generátor használata
A CSS Loader generátor tisztán CSS-ből épít animált betöltőjelzőket — képek, JavaScript és függőségek nélkül. Válasszon a tíz stílus egyikéből, állítsa be a méretet, sebességet, vastagságot és színt, majd másolja ki a generált HTML-t és CSS-t egyenesen a projektjébe.
- Állítsa be a globális paramétereket a négy vezérlővel: a Méret minden loader dobozát rögzíti, a Sebesség az animáció időtartamát módosítja, a Vastagság a kereteket és sávszélességeket kezeli, a Szín pedig minden elemet kifest.
- Böngéssze a rácsot: mind a tíz loader élőben animált az aktuális beállításokkal, így egyetlen pillantással összehasonlíthatja őket. Kattintson bármelyik loaderre a kiválasztásához.
- A részletpanel nagyobban mutatja a kijelölt loadert, együtt a HTML-részletével és a hozzáillő CSS-szel (a szükséges @keyframes-ekkel együtt).
- Nyomja meg a HTML másolása vagy CSS másolása gombot, hogy minden blokk a vágólapra kerüljön. A CSS önellátó — illessze a stíluslapjába, a HTML-t pedig ott helyezze el, ahol a loadernek meg kell jelennie.
- Módosítson bármelyik paraméteren, és a rács, a részlet-előnézet és mindkét kódblokk azonnal frissül.
Mivel a loaderek tiszta CSS-ből állnak, szinte nem is fogyasztanak sávszélességet, és minden kijelzőn élesek maradnak. Párosítsa az animációt szöveges címkével az akadálymentesítés kedvéért, és kerülje a kb. 0,5 másodperc alatti időtartamokat — a túl gyorsan villogó spinnerek inkább aggasztanak, mint megnyugtatnak.
Kapcsolódó eszközök
- CSS Minimalizáló Ingyenes online CSS minimalizáló. Azonnal tömörítse és optimalizálja CSS kódját a szóközök, megjegyzések és felesleges karakterek eltávolításával. Csökkentse a fájlméretet a gyorsabb webteljesítményért.
- CSS szépítő CSS kód azonnali formázása és szépítése. Minimalizált CSS átalakítása olvasható kóddá testreszabható beállításokkal.
- Border-radius Generátor Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS easing generátor Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
- CSS szövegárnyék generátor Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.
- CSS clip-path generátor Ingyenes online CSS clip-path generátor. Tervezzen polygon, circle, ellipse és inset alakzatokat húzható pontokkal, élő előnézettel és egy kattintásos CSS-kód másolással.
- CSS Border Radius Generátor Vizuális CSS border-radius generátor. Állítsa be minden sarkát függetlenül valós idejű előnézettel és másolja ki a CSS kódot azonnal.