I try to code loader animation inspired by this dribbble: <https://dribbble.com/shots/14420202-Processing-Animation>
and in comment section I found codepen with similar animation, but it is made all in JS: <https://codepen.io/AbubakerSaeed/full/yLaQVdq>

```
tl2
  .set(".dC-1", { rotate: 0 })
  .set(".dC-2", { rotate: 30 })
  .set(".dC-3", { rotate: 60 })
  .set(".dC-4", { rotate: 90 })
  .set(".dC-5", { rotate: 120 })
  .set(".dC-6", { rotate: 150 })
  .set(".dC-7", { rotate: 180 })
  .set(".dC-8", { rotate: 210 })
  .set(".dC-9", { rotate: 240 })
  .set(".dC-10", { rotate: 270 })
  .set(".dC-11", { rotate: 300 })
  .set(".dC-12", { rotate: 330 })
  .to(".dC-1", {
  delay: s,
  duration: s,
    rotate: 30,
})

```

I try to make pure CSS animation from it but I don't understand how to do it. Can someone explain for me how to make these two timelines in SCSS, how to translate JS code into SCSS?