Generátor CSS loaderů
Generátor CSS loaderů vytváří načítací animace v čistém CSS v šesti stylech — spinner, skákající tečky, kruh, pulse, pruhy a dvojitý kruh — s nastavitelnou velikostí, barvou, rychlostí a tloušťkou a vydá CSS i HTML.
O tomto nástroji
Generátor CSS loaderů vytváří načítací animace v čistém CSS v šesti stylech — spinner, skákající tečky, kruh, pulse, pruhy a dvojitý kruh — s nastavitelnou velikostí, barvou, rychlostí a tloušťkou a vydá CSS i HTML.
Jak ho použít
- Vyber styl loaderu.
- Uprav velikost, barvu, rychlost a tloušťku.
- Zkontroluj živý náhled.
- Klikni na Copy CSS + HTML a vlož obojí do své stránky.
Dobré vědět
- Loadery v čistém CSS nepotřebují obrázky, GIFy ani JavaScript.
- Spinnery se otáčejí pomocí @keyframes a transform: rotate(), což se animuje efektivně.
- Markup tvoří jediný prvek, případně několik potomků u teček a pruhů.
- Přidej role="status" a vizuálně skrytý popisek jako „Loading…“, aby čtečky obrazovky loader oznámily.
- Zvaž zpomalení nebo pozastavení loaderů při prefers-reduced-motion.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak v CSS udělám načítací spinner?
Dej čtvercovému prvku okraj s jednou barevnou stranou, border-radius: 50% a rotující animaci @keyframes — nebo si ho zkopíruj z tohoto generátoru.
Jsou CSS loadery lepší než GIFy?
Obvykle ano: jsou menší, zůstávají ostré v jakékoli velikosti a jejich barvu i rychlost změníš v CSS.
Jak udělám loader přístupný?
Obal ho prvkem s role="status" a přidej skrytý text jako „Loading…“, aby ho asistivní technologie mohly oznámit.
Jak loader vycentruju na stránce?
Umísti ho do kontejneru s display: flex; justify-content: center; align-items: center;.