Generátor CSS loaderů
Bezplatný generátor CSS loaderů: deset načítacích spinnerů v čistém CSS s živou regulací velikosti, rychlosti, tloušťky a barvy a hotovými HTML a CSS ke zkopírování.
Co vytváří generátor CSS loaderů?
Staví animované načítací indikátory v čistém CSS: spinner, tečky, pruhy, vlnky, puls, oběžná, překlápění, vlna, skákání a přechodový prstenec. Každý se generuje s vámi zvolenou velikostí, rychlostí, tloušťkou a barvou, připravený ke zkopírování jako HTML plus CSS.
Potřebují loadery JavaScript nebo obrázky?
Ne. Každý loader tvoří obyčejné HTML prvky animované CSS keyframes. Žádné obrázky, ikonová písma, knihovny ani běhové skripty — samotný blok CSS stačí.
Jak přidám loader na svůj web?
Klikněte na loader v mřížce, vložte blok HTML tam, kde se má zobrazit, a blok CSS vložte do své šablony stylů. CSS je soběstačné a obsahuje potřebná pravidla @keyframes.
Co mění čtyři parametry?
Velikost určuje šířku a výšku všech loaderů, rychlost mění délku animace, tloušťka ovlivňuje rámečky a šířky pruhů a barva okamžitě přebarví všechny prvky v mřížce i v kódu.
Proč se můj zkopírovaný loader neanimuje?
Nejčastější příčinou je zkopírování samotných pravidel tříd bez bloku @keyframes, nebo přejmenování třídy v HTML, ale ne v CSS. Zkopírujte oba bloky tak, jak byly vygenerovány, a názvy tříd neměňte.
Jsou animace výkonné?
Ano. Všechny loadery animují jen transform a opacity — vlastnosti, které prohlížeč skládá na GPU bez spuštění layoutu a překreslení, takže zůstávají plynulé i při více loaderech na stránce.
Jsou loadery přístupné?
Spinnery jsou vizuální dekorace, čtečkám obrazovky pomůže textová nápověda. Přidejte vedle loaderu skrytý popisek „Načítání“, nebo nastavte loaderu aria-hidden="true" a postup ohlašujte zvlášť.
Odesílají se data na server?
Ne. Generátor běží celý ve vašem prohlížeči. Vaše nastavení nikdy neopustí stránku a generovaný kód se skládá lokálně na vašem zařízení.
Jak používat Generátor CSS loaderů
Generátor CSS loaderů staví animované indikátory načítání v čistém CSS — bez obrázků, bez JavaScriptu, bez závislostí. Vyberte jeden z deseti stylů, doladěte velikost, rychlost, tloušťku a barvu a pak zkopírujte vygenerované HTML a CSS přímo do projektu.
- Nastavte globální parametry čtyřmi ovládacími prvky: Velikost určuje rámeček každého loaderu, Rychlost mění dobu animace, Tloušťka ovládá okraje a šířky pruhů a Barva obarvuje každý prvek.
- Procházejte mřížku: všech deset loaderů zůstává živě animovaných s aktuálním nastavením, takže je porovnáte jedním pohledem. Kliknutím na libovolný loader jej vyberete.
- Panel podrobností zobrazuje vybraný loader větší, spolu s úryvkem HTML a odpovídajícím CSS (včetně potřebných @keyframes).
- Stiskněte Kopírovat HTML nebo Kopírovat CSS a každý blok odešlete do schránky. CSS je soběstačný — vložte ho do své šablony stylů a HTML umístěte tam, kde se má loader objevit.
- Změňte jakýkoli parametr a mřížka, náhled podrobností i oba bloky kódu se aktualizují okamžitě.
Protože loadery jsou čisté CSS, stojí téměř žádnou šířku pásma a zůstávají ostré na každém displeji. Spojte animaci s textovým popiskem kvůli přístupnosti a vyhněte se délkám pod zhruba 0,5 s — spinnery blikající příliš rychle víc znepokojují, než uklidňují.
Související nástroje
- CSS Minifikátor Bezplatný online CSS minifikátor. Okamžitě komprimujte a optimalizujte CSS kód odstraněním mezer, komentářů a zbytečných znaků. Zmenšete velikost souboru pro rychlejší výkon webu.
- CSS zkrášlovač Formátujte a zkrášlujte CSS kód okamžitě. Převeďte minifikovaný CSS na čitelný kód s přizpůsobitelnými možnostmi.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.
- Generátor CSS clip-path Bezplatný online generátor CSS clip-path. Navrhujte tvary polygon, circle, ellipse a inset s tažitelnými body, živým náhledem a zkopírováním kódu CSS na jedno kliknutí.
- Generátor Border Radius CSS Vizuální generátor border-radius CSS. Upravte každý roh nezávisle s živým náhledem a okamžitě zkopírujte CSS kód.