Generator spinera na przycisku w CSS

Przykład krok po kroku

Załóżmy, że masz ciemnoniebieski przycisk „Zapisz” z białym tekstem. W generatorze wpisz rozmiar 16, grubość 2, kolor #ffffff i prędkość 0,8. Narzędzie wygeneruje:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Tor pierścienia ma stały, jasnoszary kolor, który dobrze widać na ciemnym przycisku. Jeśli chcesz subtelniejszy tor, zmień #eee na wartość półprzezroczystą, na przykład rgba(255, 255, 255, 0.3), we wklejonym CSS. Kolor łuku pozostaje taki, jaki wybrałeś.

Umieszczenie wewnątrz przycisku

Umieść element spinera przed etykietą i zrób z przycisku wiersz flex, aby oba elementy były w jednej linii z odstępem:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Zapisywanie"></span>
  Zapisywanie
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Dodawaj spinner i stan disabled tylko wtedy, gdy żądanie trwa. Usuń oba po zakończeniu. To wyłączenie przycisku zapobiega podwójnemu wysłaniu formularza, a spinner wyjaśnia, dlaczego.

Rozmiar i grubość dla przycisków

Uwagi

• Generator tworzy jeden okrągły pierścień. Nie tworzy przycisku, więc style przycisku pozostają Twoje.
• Pierścień grubszy niż jedna czwarta średnicy wypełnia się i wygląda jak krążek, dlatego przy małych rozmiarach trzymaj cienkie wartości.
• Zachowaj etykietę obok spinera. Spinner bez tekstu bywa trudny do zrozumienia dla niektórych użytkowników.

Unikaj przesunięć układu

Jeśli spinner się pojawi, a przycisk nagle się poszerzy, układ się przesunie i zmieni się miejsce klikania. Pomogą dwa proste sposoby. Nadaj przyciskowi minimalną szerokość, która pomieści spinner i dłuższą etykietę. Albo zarezerwuj miejsce na spinner od początku, pokazując pusty placeholder 16 px przed etykietą. Ponieważ wygenerowany pierścień ma stałą szerokość i wysokość w pikselach, łatwo zarezerwować dokładnie tyle miejsca, ile potrzebuje.