Generator CSS spinera ładowania

Co dostajesz

Generator zapisuje dwie reguły: klasę .loader i blok @keyframes spin. Klasa rysuje okrąg, nadaje mu jasnoszary pierścień i koloruje górną krawędź tego pierścienia. Keyframes obracają okrąg o pełen obrót, a linia animation powtarza to w nieskończoność. Nic więcej nie jest potrzebne: żadnego pliku graficznego, czcionki ikon ani skryptu.

Przy wartościach domyślnych (60 px, pierścień 6 px, #10b981, 1 sekunda) wynik wygląda tak:

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

Dodaj do swojej strony

Wklej CSS do arkusza stylów, a następnie dodaj jeden pusty element tam, gdzie ma się pojawić spinner:

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

Pokaż element, gdy trwa praca, i usuń go lub ukryj za pomocą display: none, gdy treść się pojawi. Atrybuty role i aria-label pozwalają czytnikom ekranu ogłaszać stan.

Rozmiary, które sprawdzają się w praktyce

Dobra zasada to grubość około jednej dziesiątej średnicy. Znacznie cieńszy pierścień wygląda blado na ekranach o wysokiej rozdzielczości, a znacznie grubszy zamienia się w plamę.

Warto wiedzieć

• Kolor toru jest stały, jasnoszary (#eee). Na ciemnym tle zmień tę wartość we wklejonym CSS.
• Narzędzie tworzy jeden okrągły spinner. Kropki, paski i inne kształty wymagają innych znaczników.
• Jeśli w projekcie istnieje już klasa loader lub animacja spin, zmień ich nazwy we wklejonym CSS, aby reguły się nie zderzały.

Pokazywanie i ukrywanie

Spinner ładowania powinien pojawić się, gdy zaczyna się praca, i zniknąć, gdy się skończy. Prosty wzorzec to atrybut hidden na elemencie, który usuwasz w chwili rozpoczęcia żądania. Jeśli oczekiwanie zwykle jest bardzo krótkie, dodaj opóźnienie kilkuset milisekund przed pokazaniem pierścienia, aby szybkie odpowiedzi nie powodowały mignięcia spinera. Cokolwiek wybierzesz, w przypadku błędu również ukryj spinner, bo inaczej odwiedzający będzie czekał na coś, co już się nie powiodło.