Generátor CSS loaderov

Čo je tento nástroj?

CSS loader je malý animovaný prvok — rotujúci prstenec, poskakujúce bodky, pulzujúci kruh alebo pohybujúci sa progres bar — ktorý ukazuje, že sa obsah načítava, bez JavaScriptovej animačnej slučky a bez obrázka alebo GIF-u. Skladá sa z niekoľkých CSS pravidiel a bloku @keyframes, ktorý definuje pohyb prvku v čase.

Tento nástroj generuje štyri bežné vzory loaderov so skutočným, funkčným CSS: rotujúci spinner postavený na okraji, tri bodky poskakujúce v sekvencii, kruh, ktorý pulzuje dovnútra a von, a pruh s posúvajúcou sa výplňou. Upravte veľkosť, farbu a trvanie animácie priamo v náhľade a skopírujte vygenerované CSS aj minimálny HTML element, na ktorý sa aplikuje.

Zdroj: CSS Animations Level 1, W3C — špecifikácia definujúca @keyframes a animačné vlastnosti, z ktorých tieto loadery vychádzajú.

Prečo ho používať?

• Živý náhľad sa animuje v reálnom čase pri zmene štýlu, veľkosti, farby alebo rýchlosti — presne vidíte, čo nasadíte.
• Generuje kompletné CSS vrátane bloku @keyframes, nie len útržok, ktorý si musíte doplniť sami.
• Vypíše aj presný HTML kód, ktorý CSS očakáva, takže netreba hádať názvy tried ani štruktúru elementov.
• Štyri odlišné animačné vzory (spinner, bodky, pulz, pruh) pokrývajú najbežnejšie prípady stavu načítavania.
• Čistá CSS animácia — žiadny JavaScript, žiadne obrázkové súbory, menšia a plynulejšia než animovaný GIF.
• Beží celé vo vašom prehliadači, zadarmo, bez registrácie.

Ako sa používa

1. Vyberte štýl loadera: rotujúci prstenec, poskakujúce bodky, pulzujúci kruh alebo progres bar.
2. Posuňte posuvník veľkosti a zväčšite alebo zmenšite loader.
3. Vyberte farbu — stane sa akcentovou farbou loadera (rotujúci okraj, bodky alebo výplň pruhu).
4. Upravte rýchlosť, aby bola animácia rýchlejšia alebo pomalšia; väčšina UI loaderov pôsobí najlepšie medzi 0,6 s a 1,5 s na cyklus.
5. Skopírujte vygenerované CSS do svojho štýlopisu a vložte HTML úryvok kamkoľvek potrebujete zobraziť loader.

Príklad

Vstup

Štýl: rotujúci prstenec · Veľkosť: 40px · Farba: oranžová · Rýchlosť: 1,0s

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ý prstencový spinner: kruh s takmer priehľadným okrajom na troch stranách a plnou farbou na štvrtej, ktorý sa nepretržite otáča s lineárnou, nekonečnou animáciou.

Prečo CSS loadery namiesto animovaných GIF-ov

Animované GIF spinnery boli roky predvolenou voľbou, no dnes je CSS loader takmer vždy lepšia voľba: je to pár stoviek bajtov textu namiesto binárneho obrazového súboru, škáluje sa na akúkoľvek veľkosť bez pixelácie, keďže je vykreslený pomocou okrajov a transformácií, a farbu možno okamžite zmeniť jedinou CSS premennou namiesto opätovného exportu nového obrázka.

Štyri štýly tu uvedené — spinner, bodky, pulz, pruh — sú zároveň tie, ktoré sa najčastejšie objavujú v reálnych rozhraniach, od stavov načítavania tlačidiel až po prekrytia celej stránky. Každý z nich mení v @keyframes iba transform a opacity, čo prehliadače dokážu plynulo animovať na GPU bez trhania zvyšku stránky.

Výber štýlu podľa situácie

• Rotujúci prstenec: najneutrálnejšia, univerzálna voľba — dobre funguje vnútri tlačidiel a v malých vložených stavoch načítavania.
• Poskakujúce bodky: pôsobí ľahšie a hravejšie; bežné pre indikátory 'píše...' v chatoch a krátke čakania.
• Pulzujúci kruh: vhodný pre indikátor načítavania jedného prvku alebo ako bodka stavu 'aktívne/naživo'.
• Progres bar: naznačuje pohyb vpred a často sa očakáva pri načítavaní stránok alebo viackrokových procesoch, aj bez presného percenta.

Použitie loadera vo vašom projekte

Vygenerované CSS vložte raz do svojho štýlopisu a potom znova použite HTML úryvok kdekoľvek potrebujete stav načítavania — vnútri tlačidla počas odosielania formulára, nad kartou počas načítavania dát alebo vycentrovane v prekrytí celej stránky. Keďže animácia je čisté CSS, jej zapnutie a vypnutie je také jednoduché ako pridanie alebo odstránenie prvku z DOM, alebo jeho skrytie pomocou display: none.

→ Generátor box-shadow · CSS Minifier

Časté otázky