<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" overflow="visible" fill="#ff5463">
  <defs>
    <circle id="loader" r="4" cx="50" cy="50" transform="translate(0 -30)" />
  </defs>
  <use class="loader" xlink:href="#loader" transform="rotate(0 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(30 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(60 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(90 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(120 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(150 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(180 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(210 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(240 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(270 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(300 50 50)" />
  <use class="loader" xlink:href="#loader" transform="rotate(330 50 50)" />
</svg>
@for $i from 1 to 13 {
  .loader:nth-of-type(#{$i}) {
    animation: 1s $i * 0.08s opacityLoader infinite;
  }
}
@keyframes opacityLoader {
  to {
    opacity: 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.