Cycle iteration in stylus with rotate and delay

Question

I want to create spinner preloader (like ios-style) with stylus.

I have for cycle in the petal element. My variables delay & degree are not compiled correctly I need to rotate every nth-element and delay each animation

Help me please. Here is my 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

Expected result:

Answer 1

we need declare increments

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

out of &:nth-child({num}), like this:

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