Generátor CSS Loaderu

Co je tento nástroj?

CSS loader je malý animovaný element — otočný kruh, poskakující tečky, pulzující kruh nebo pohyblivá lišta postupu — používaný k zobrazení, že se obsah načítá, bez JavaScriptové animační smyčky a bez potřeby obrázku nebo GIFu. Je postavený z pár CSS pravidel plus bloku @keyframes, který definuje, jak se element v čase pohybuje.

Tento nástroj generuje čtyři běžné vzory loaderu se skutečným, funkčním CSS: otočný spinner na bázi okraje, tři tečky poskakující postupně, kruh, který pulzuje dovnitř a ven, a lišta s posouvající se výplní. Upravte velikost, barvu a délku animace na živém náhledu, poté zkopírujte vygenerované CSS a minimální HTML element, na který se aplikuje.

Zdroj: CSS Animations Level 1, W3C — specifikace definující @keyframes a vlastnosti animace, ze kterých jsou tyto loadery postaveny.

Proč ho používat?

• Živý náhled animuje v reálném čase, jak měníte styl, velikost, barvu nebo rychlost — vidíte přesně to, co budete používat naostro.
• Generuje kompletní CSS včetně bloku @keyframes, ne jen útržek, který musíte sami dokončit.
• Vypisuje také přesný HTML markup, který CSS očekává, takže není potřeba hádat o názvech tříd nebo struktuře elementu.
• Čtyři odlišné vzory animace (spinner, tečky, pulz, lišta) pokrývají nejběžnější případy použití stavu načítání.
• Čistě CSS animace — žádný JavaScript, žádné soubory s obrázky, menší a plynulejší než animovaný GIF.
• Běží kompletně ve vašem prohlížeči, zdarma, bez registrace.

Jak se používá

1. Zvolte styl loaderu: otočný kruh, poskakující tečky, pulzující kruh nebo lišta postupu.
2. Přetáhněte posuvník velikosti, abyste loader zvětšili nebo zmenšili.
3. Vyberte barvu — ta se stane akcentovou barvou loaderu (otáčející se okraj, tečky nebo výplň lišty).
4. Upravte rychlost, aby byla animace rychlejší nebo pomalejší; většina UI loaderů se čte nejlépe mezi 0,6 s a 1,5 s na cyklus.
5. Zkopírujte vygenerované CSS do stylopisu a vložte úryvek HTML kamkoli, kde má loader být.

Příklad

Vstup

Styl: otočný kruh · Velikost: 40px · Barva: oranžová · Rychlost: 1,0 s

Výstup

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

Klasický kruhový spinner: kruh s téměř průhledným okrajem na třech stranách a plnou barvou na čtvrté, plynule rotující lineární, nekonečnou animací.

Proč CSS loadery místo animovaných GIFů

Animované GIF spinnery byly léta výchozí volbou, ale CSS loader je dnes téměř vždy lepší volba: je to pár set bajtů textu místo binárního obrázkového souboru, škáluje na jakoukoli velikost bez pixelace, protože je kreslen okraji a transformacemi, a jeho barvu lze okamžitě změnit jedinou CSS proměnnou místo nového exportu obrázku.

Čtyři styly zde — spinner, tečky, pulz, lišta — jsou také ty, které se nejčastěji objevují ve skutečných rozhraních, od stavů načítání tlačítek po celostránkové překryvy. Každý používá ve svých keyframes pouze změny transform a opacity, které prohlížeče dokáží plynule animovat na GPU, aniž by trhaly zbytek stránky.

Výběr stylu pro danou situaci

• Otočný kruh: nejneutrálnější, univerzální volba — dobře funguje uvnitř tlačítek a malých vloženého stavu načítání.
• Poskakující tečky: čte se jako lehčí a hravější; běžné pro chatové indikátory 'píše...' a krátká čekání.
• Pulzující kruh: dobré pro jednoprvkový indikátor načítání nebo jako stavová tečka 'aktivní/živě'.
• Lišta postupu: naznačuje pohyb vpřed a často se očekává při načítání stránky nebo vícekrokových procesech, i bez přesného procenta.

Použití loaderu ve vašem projektu

Vložte vygenerované CSS do svého stylopisu jednou, poté znovu použijte HTML úryvek kdekoli potřebujete stav načítání — uvnitř tlačítka během odesílání formuláře, přes kartu při načítání dat, nebo vystředěné v celostránkovém překryvu. Protože animace je čistě CSS, zapnutí a vypnutí je stejně jednoduché jako přidání nebo odebrání elementu z DOM, nebo jeho skrytí pomocí display: none.

→ Generátor box-shadow · CSS Minifikátor

Časté dotazy