Generator loadera CSS

Czym jest to narzędzie?

Loader CSS to niewielki animowany element — obracający się pierścień, skaczące kropki, pulsujące koło albo poruszający się pasek postępu — używany, by pokazać, że treść się ładuje, bez pętli animacji w JavaScript i bez obrazka czy GIF-a. Składa się z kilku reguł CSS oraz bloku @keyframes, który definiuje, jak element zmienia się w czasie.

To narzędzie generuje cztery popularne wzorce loadera z rzeczywistym, działającym CSS-em: obracający się spinner oparty na obramowaniu, trzy kropki skaczące po kolei, koło pulsujące na zewnątrz i do wewnątrz oraz pasek z przesuwającym się wypełnieniem. Ustaw rozmiar, kolor i czas trwania w podglądzie na żywo, a następnie skopiuj wygenerowany CSS i minimalny element HTML, do którego się on odnosi.

Źródło: CSS Animations Level 1, W3C — specyfikacja definiująca @keyframes i właściwości animacji, na których oparte są te loadery.

Dlaczego warto go używać?

• Podgląd na żywo animuje się w czasie rzeczywistym przy zmianie stylu, rozmiaru, koloru lub szybkości — widzisz dokładnie to, co wdrożysz.
• Generuje pełny CSS, łącznie z blokiem @keyframes, a nie tylko fragment do dokończenia samodzielnie.
• Generuje też dokładny znacznik HTML, którego oczekuje CSS, więc nie musisz zgadywać nazw klas ani struktury elementów.
• Cztery różne wzorce animacji (spinner, kropki, puls, pasek) pokrywają najczęstsze przypadki użycia stanów ładowania.
• Czysta animacja CSS — bez JavaScriptu, bez plików graficznych, lżejsza i płynniejsza niż animowany GIF.
• Działa w całości w przeglądarce, za darmo, bez rejestracji.

Jak używać

1. Wybierz styl loadera: obracający się pierścień, skaczące kropki, pulsujące koło lub pasek postępu.
2. Przeciągnij suwak rozmiaru, aby powiększyć lub zmniejszyć loader.
3. Wybierz kolor — stanie się kolorem akcentu loadera (obracające się obramowanie, kropki lub wypełnienie paska).
4. Dostosuj szybkość, aby animacja była szybsza lub wolniejsza; większość loaderów interfejsu wygląda najlepiej przy 0,6–1,5 sekundy na cykl.
5. Skopiuj wygenerowany CSS do arkusza stylów i wklej fragment HTML tam, gdzie loader ma się pojawić.

Przykład

Wejście

Styl: obracający się pierścień · Rozmiar: 40px · Kolor: pomarańczowy · Szybkość: 1,0s

Wynik

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

Klasyczny spinner pierścieniowy: koło z niemal przezroczystym obramowaniem po trzech stronach i pełnym kolorem po czwartej, obracające się nieprzerwanie z liniową, nieskończoną animacją.

Dlaczego loadery CSS zamiast animowanych GIF-ów

Animowane spinnery GIF były domyślnym wyborem przez lata, ale dziś loader CSS jest niemal zawsze lepszym rozwiązaniem: to kilkaset bajtów tekstu zamiast binarnego pliku graficznego, skaluje się do dowolnego rozmiaru bez pikselizacji, bo jest rysowany obramowaniami i transformacjami, a kolor można zmienić natychmiast jedną wartością CSS zamiast eksportować nowy obrazek.

Cztery style tutaj — spinner, kropki, puls, pasek — to też te, które najczęściej pojawiają się w rzeczywistych interfejsach, od stanów ładowania w przyciskach po nakładki na całą stronę. Każdy z nich animuje w keyframes tylko transform i opacity, co przeglądarki mogą płynnie animować na GPU, nie zwalniając reszty strony.

Dobór stylu do sytuacji

• Obracający się pierścień: najbardziej neutralny, uniwersalny wybór — dobrze sprawdza się w przyciskach i małych, wbudowanych stanach ładowania.
• Skaczące kropki: sprawiają wrażenie lżejszych i bardziej zabawnych; częste w czatach jako wskaźnik „pisze...” oraz przy krótkich oczekiwaniach.
• Pulsujące koło: dobre jako wskaźnik ładowania pojedynczego elementu lub jako kropka statusu „aktywny/na żywo”.
• Pasek postępu: sugeruje ruch do przodu i często jest oczekiwany przy ładowaniu strony lub wieloetapowych procesach, nawet bez dokładnego procenta.

Użycie loadera w projekcie

Wklej wygenerowany CSS raz do arkusza stylów, a potem wielokrotnie używaj fragmentu HTML wszędzie tam, gdzie potrzebny jest stan ładowania — w przycisku podczas wysyłania formularza, nad kartą podczas pobierania danych, albo wyśrodkowany w nakładce na całą stronę. Ponieważ animacja to czysty CSS, włączanie i wyłączanie jej sprowadza się do dodania lub usunięcia elementu z DOM, albo ukrycia go za pomocą display: none.

→ Generator cieni ramki · Minifikator CSS

Najczęściej zadawane pytania