Generator för CSS-spinneranimation

Så är animationen uppbyggd

Den genererade CSS:en har två delar som fungerar tillsammans. Egenskapen animation på .loader anger namnet på animationen, sätter dess längd, väljer tidsfunktionen och upprepar den:

animation: spin 0.8s linear infinite;

Regeln @keyframes spin beskriver själva rörelsen. Den har bara ett slutläge, en rotation på 360 grader. Webbläsaren börjar från elementets normala läge och interpolerar till det slutläget:

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

Fältet Hastighet (s) i verktyget blir animationens längd. Allt annat, inklusive linear och infinite, är detsamma.

Så väljer du längd

Större ringar kan gå något långsammare än små, eftersom kanten på en stor cirkel redan täcker större sträcka varje sekund.

Varför linjär tidsfunktion

Verktyget använder linear så att ringen behåller samma vinkelhastighet hela vägen runt. Övergångskurvor som ease-in-out får ringen att sakta ned och accelerera vid varje varv, vilket ser ut som hack i en oändlig loop. Vill du ändå ha den effekten ändrar du ordet linear i den inklistrade CSS:en.

Begränsningar att ha i åtanke

• Ett värde på 0 ger en animation med noll längd, så ringen roterar inte synligt. Använd ett värde över 0.
• Spinnern roterar alltid medurs. Vill du vända riktningen byter du slutrotationen till -360deg efter att du kopierat koden.
• Rörelsen är en enda kontinuerlig rotation. Pulsering, studs eller flerstegsrörelse kräver extra keyframes som skrivs för hand.

Pausa och styr animationen

När CSS:en är på din sida kan du styra animationen med vanliga egenskaper. Med animation-play-state: paused; fryser du ringen på plats, vilket är praktiskt i ett läge där arbetet är klart men elementet ska synas kvar. Med animation-delay: 0.2s; skjuter du upp starten, så att spinnern bara visas om väntetiden inte är omedelbar. Det är vanliga CSS-egenskaper som du lägger till i regeln .loader efter att du kopierat den.