Generator animacji spinera CSS

Jak zbudowana jest animacja

Wygenerowany CSS ma dwie części, które działają razem. Właściwość animation na .loader nadaje animacji nazwę, ustawia jej czas trwania, wybiera funkcję czasową i powtarza ją:

animation: spin 0.8s linear infinite;

Reguła @keyframes spin opisuje sam ruch. Ma tylko stan końcowy, czyli obrót o 360 stopni. Przeglądarka zaczyna od normalnego położenia elementu i interpoluje do tego stanu końcowego:

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

Pole Prędkość (s) w narzędziu staje się czasem trwania. Wszystko inne, w tym linear i infinite, pozostaje bez zmian.

Jak dobrać czas trwania

Większe pierścienie mogą obracać się nieco wolniej niż małe, ponieważ krawędź dużego okręgu pokonuje w każdej sekundzie większą odległość.

Dlaczego liniowa funkcja czasowa

Narzędzie używa linear, aby pierścień zachowywał tę samą prędkość kątową na całym obwodzie. Krzywe przyspieszenia, takie jak ease-in-out, sprawiają, że pierścień zwalnia i przyspiesza przy każdym obrocie, co w nieskończonej pętli wygląda jak szarpanie. Jeśli mimo to chcesz tego efektu, zmień słowo linear we wklejonym CSS.

Ograniczenia, o których warto pamiętać

• Prędkość 0 daje animację o zerowym czasie trwania, więc pierścień nie obróci się widocznie. Użyj wartości większej niż 0.
• Spinner zawsze obraca się zgodnie z ruchem wskazówek zegara. Aby odwrócić kierunek, po skopiowaniu zmień końcowy obrót na -360deg.
• Ruch to jeden ciągły obrót. Pulsowanie, odbijanie czy ruch wieloetapowy wymagają dodatkowych keyframes pisanych ręcznie.

Wstrzymywanie i sterowanie animacją

Gdy CSS znajdzie się na stronie, animacją możesz sterować standardowymi właściwościami. Ustawienie animation-play-state: paused; zamraża pierścień w miejscu, co jest przydatne w stanie, w którym praca jest zakończona, ale element ma pozostać widoczny. Ustawienie animation-delay: 0.2s; opóźnia start, więc spinner pojawia się tylko wtedy, gdy oczekiwanie nie jest natychmiastowe. To zwykłe właściwości CSS, które dopisujesz do reguły .loader po skopiowaniu.