Generator loaderów CSS
Generator loaderów CSS tworzy animacje ładowania w czystym CSS w sześciu stylach — spinner, skaczące kropki, pierścień, pulse, słupki i podwójny pierścień — z regulowanym rozmiarem, kolorem, prędkością i grubością, zwracając zarówno CSS, jak i HTML.
O tym narzędziu
Generator loaderów CSS tworzy animacje ładowania w czystym CSS w sześciu stylach — spinner, skaczące kropki, pierścień, pulse, słupki i podwójny pierścień — z regulowanym rozmiarem, kolorem, prędkością i grubością, zwracając zarówno CSS, jak i HTML.
Jak używać
- Wybierz styl loadera.
- Dostosuj rozmiar, kolor, prędkość i grubość.
- Sprawdź podgląd na żywo.
- Kliknij Copy CSS + HTML i wklej oba fragmenty na swoją stronę.
Warto wiedzieć
- Loadery w czystym CSS nie potrzebują obrazów, GIF-ów ani JavaScriptu.
- Spinnery obracają się dzięki @keyframes i transform: rotate(), co jest wydajne w animacji.
- Znacznik to pojedynczy element albo kilka elementów potomnych w przypadku kropek i słupków.
- Dodaj role="status" i wizualnie ukrytą etykietę, np. „Loading…”, aby czytniki ekranu ogłaszały loader.
- Rozważ spowolnienie lub zatrzymanie loaderów przy prefers-reduced-motion.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak zrobić spinner ładowania w CSS?
Nadaj kwadratowemu elementowi obramowanie z jednym kolorowym bokiem, border-radius: 50% i obracającą się animację @keyframes — albo skopiuj gotowy z tego generatora.
Czy loadery CSS są lepsze niż GIF-y?
Zwykle tak: są mniejsze, pozostają ostre w każdym rozmiarze, a ich kolor i prędkość można zmienić w CSS.
Jak zrobić dostępny loader?
Umieść go w elemencie z role="status" i dodaj ukryty tekst, np. „Loading…”, żeby technologie wspomagające mogły go ogłosić.
Jak wyśrodkować loader na stronie?
Umieść go w kontenerze z display: flex; justify-content: center; align-items: center;.