Generator prostego spinera CSS

Dlaczego ten spinner jest prosty

Wiele wskaźników ładowania używa kilku zagnieżdżonych elementów, obrazów tła lub skryptów. Ten to pojedynczy div ostylowany jako okrąg. Pierścień tworzy obramowanie, a tylko jego górna część ma inny kolor. Gdy okrąg się obraca, kolorowa część przesuwa się dookoła. Cała technika opiera się na czterech elementach:

1. Kwadratowe pole o równej szerokości i wysokości.
2. border-radius: 50%, które zamienia pole w okrąg.
3. Szare obramowanie z jedną kolorową stroną, border-top-color.
4. Animacja obrotu, która nigdy się nie kończy.

Pełny kod

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

<div class="loader"></div>

To cały wskaźnik ładowania. Nie ma czego pobierać ani zależności do aktualizowania.

Wyśrodkowanie

Pierścień to zwykły element blokowy. Aby wyśrodkować go na stronie lub w kontenerze, dodaj margin: 0 auto; do .loader dla wyśrodkowania poziomego albo zamień element nadrzędny w kontener flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Czego to narzędzie nie robi

• Tworzy tylko styl pierścienia. Rzędy kropek, paski i wskaźniki pulsujące to inne projekty.
• Kolor toru jest stały, jasnoszary. Jeśli tło jest ciemne, zmień go we wklejonym CSS.
• Nie dodaje atrybutów dostępności do Twoich znaczników. Dodaj role="status" i aria-label do elementu samodzielnie.

Drobne poprawki po skopiowaniu

Ponieważ spinner składa się z kilku właściwości, zmiany są proste. Aby pierścień wyglądał lżej, zmniejsz szerokość obramowania. Aby wyglądał spokojniej, zwiększ czas animacji. Aby użyć tego samego wskaźnika w dwóch rozmiarach, skopiuj klasę raz i nadpisz tylko width, height i border-width w drugiej klasie. Krótki kod to główna zaleta prostego spinera: możesz przeczytać go w całości i zmienić dowolną wartość bez przeszukiwania biblioteki.

Możesz też zabarwić tor, zmieniając #eee na kolor pasujący do Twojej strony, podczas gdy poruszający się łuk zachowuje kolor wybrany w generatorze.