Zyklus Iteration in Stift mit Drehen und Verzögerung

Question

Ich möchte Spinner preloader (wie ios-Stil) mit Stift erstellen.

Ich habe for Zyklus im petal Element. Meine Variablen delay & degree sind nicht richtig Ich brauche zusammengestellt jedes n-ten-Element zu drehen und verzögern jeder Animation

Helfen Sie mir bitte. Hier ist mein Code:

animation a-preloader 1s infinite linear 
    delay = 0s 
    degree = 0deg 
    for num in (1..12) 
     &:nth-child({num}) 
      animation-delay delay 
      transform rotate(degree) 
      delay = delay + 0.083s 
      degree = degree + 30deg 

And here is my playground Codepen

Erwartetes Ergebnis:

Answer 1

erklären wir brauchen Schritten

delay = delay + 0.083s 
degree = degree + 30deg 

aus &:nth-child({num}), gefällt das:

animation a-preloader 1s infinite linear 
delay = 0s 
degree = 0deg 
for num in (1..12) 
    &:nth-child({num}) 
     animation-delay delay 
     transform rotate(degree) 
    delay = delay + 0.083s 
    degree = degree + 30deg