Generator loaderów CSS

Jak działa wygenerowany CSS

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Spinner to koło narysowane grubym obramowaniem. Reguła border-top-color maluje tylko górną część pierścienia kolorem akcentu, dzięki czemu pierścień wygląda jak łuk, a reguła @keyframes spin obraca go wokół środka. Obrót przez transform: rotate() utrzymuje animację lekką, bo przeglądarka przesuwa element na kompozytorze zamiast rysować go klatka po klatce.

Aby wyświetlić go na stronie, dodaj jeden element i załaduj CSS:

<div class="loader" role="status" aria-label="Ładowanie"></div>

Zadbaj o dostępność

• Dodaj role="status", aby czytniki ekranu zapowiadały spinner.
• Ustaw aria-label z tekstem stanu, na przykład “Ładowanie”.
• Nie ukrywaj treści za spinnerem dłużej niż kilka sekund bez awaryjnego limitu czasu.
• Szanuj prefers-reduced-motion. Użytkownikom, którzy wyłączyli animacje, zamiast obrotu pokaż proste wygaszenie lub statyczny tekst “Ładowanie…”:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Kiedy używać spinnera, a kiedy optymistycznego UI

• Odpowiedź poniżej 100 ms: spinner zbędny; ludzkie oko ledwie dostrzega opóźnienie.
• 100 ms – 1 s: subtelny spinner (małe kółko, tekst przycisku “Ładowanie…”) zapobiega podwójnym kliknięciom.
• 1 s – 10 s: wyraźny spinner, najlepiej z postępem, jeśli da się go zmierzyć.
• > 10 s: to nie problem spinnera; ustal, co jest wolne, i napraw to.

Przy wysyłaniu formularzy i klikaniu przycisków spinner wewnątrz przycisku zwykle sprawdza się lepiej niż nakładka na całą stronę.