<svg viewBox="0 0 120 120" class="svg-preloader">
    <symbol id="s-circle">
      <circle r="10" cx="10" cy="10"></circle>
    </symbol>
   <rect class="r-bounds" width="100%" height="100%"/>
    <g id="circle" class="g-circles">
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
      <use xlink:href="#s-circle" class="u-circle"/>
    </g>
  </svg>

$max: 12;
$size: 120px;
$fill: orangered;
$angle: 360/$max;

.r-bounds {
  fill: none;
  stroke: #AAA;
	}

.svg-preloader {
  height: $size;
  width: $size;
  }

.g-circles {
  fill: $fill;
  }

.u-circle {
  transform-origin: $size/2 $size/2;
  animation: opacity 1.2s linear infinite;
  
  @for $item from 1 through $max {
    &:nth-child(#{$max}n + #{$item}){
      transform: rotate(#{-$angle*$item}deg) translate(10px, 10px) scale(.85);
	   animation-delay: -#{$item/10}s;
    }
  }
}

@keyframes opacity {
  0% {
    fill-opacity: 1;
  }
  75% {
    fill-opacity: 0;
  }
}