带有旋转和延迟的手写笔循环迭代

Question

我想用 stylus.

创建旋转器预加载器（如 ios 风格）

我在 petal 元素中有 for 循环。 我的变量 delay & degree 编译不正确 我需要旋转每个第 n 个元素并延迟每个动画

请帮帮我。这是我的代码：

    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

预期结果：

Answer 1

我们需要声明增量

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

&:nth-child({num}) 个，像这样：

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