Generator Spinnerów CSS — Animowane Ładowania

Spinnery i loadery informują użytkownika, że trwa ładowanie treści. CSS spinner jest lepszy od obrazu GIF — skalowalny, łatwy do dostosowania i lżejszy.

Typy spinnerów CSS

• Kręcące koło: klasyczny okrągły spinner z border
• Pulsujące koło: animacja scale lub opacity
• Trzy kropki: sekwencyjne animowane kółka
• Progress bar: liniowy wskaźnik postępu
• Szkielet (skeleton): placeholder kształt treści

Najlepsze praktyki

Używaj spinnerów dla operacji trwających powyżej 300 ms. Dla operacji powyżej 1 s — pokaż spinner z opisem. Skeleton loading jest lepszy dla złożonych layoutów.