CSS-spinner animatie generator

Zo is de animatie opgebouwd

De gegenereerde CSS bestaat uit twee delen die samenwerken. De eigenschap animation van .loader geeft de animatie een naam, bepaalt de duur, kiest de timingfunctie en herhaalt de animatie:

animation: spin 0.8s linear infinite;

De regel @keyframes spin beschrijft de beweging zelf. Hij heeft alleen een eindtoestand: een rotatie van 360 graden. De browser begint op de normale positie van het element en interpoleert naar die eindtoestand:

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

Het veld Snelheid in de tool wordt de duur. Al het andere, inclusief linear en infinite, blijft hetzelfde.

De duur kiezen

Grote ringen kunnen iets trager draaien dan kleine, omdat de rand van een grote cirkel per seconde al meer afstand aflegt.

Waarom lineaire timing

De tool gebruikt linear zodat de ring over de hele omwenteling dezelfde hoeksnelheid houdt. Easing-curven zoals ease-in-out laten de ring bij elke omwenteling afremmen en weer versnellen, wat bij een eindeloze lus als haperen overkomt. Wil je dat effect toch, wijzig dan het woord linear in de geplakte CSS.

Beperkingen om in de gaten te houden

• Een snelheid van 0 geeft een animatie zonder duur, de ring draait dan niet zichtbaar. Gebruik een waarde boven 0.
• De spinner draait altijd met de klok mee. Om dat om te draaien, vervang je na het kopiëren de eindrotatie door -360deg.
• De beweging is één doorlopende rotatie. Pulseren, stuiteren of bewegingen in meerdere stappen vereisen extra, met de hand geschreven keyframes.

Pauzeren en de animatie bedienen

Zodra de CSS op je pagina staat, kun je de animatie met standaardeigenschappen bedienen. Met animation-play-state: paused; bevriest de ring op zijn plek, handig voor een situatie waarin het werk klaar is maar het element zichtbaar blijft. Met animation-delay: 0.2s; stel je de start uit, zodat de spinner alleen verschijnt als het wachten niet direct voorbij is. Dit zijn gewone CSS-eigenschappen die je na het kopiëren aan de regel .loader toevoegt.