Sass loader

lds-spinner html

<div class="lds-spinner">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

lds-spinner.scss

/** for custom sizes, respect this schema
.custom {
  width: ($top + $left) * 2;
  height: ($top + $left) * 2;

  div {
    transform-origin: $top + $left $top + $left;

    &:after {
      top: $top;  <-- important variable
      left: $left;  <-- important variable
      width: $left * 2;
      height: $top * 6;
    }
  }
}
 */

.lds-spinner {
  color: #000;
  display: inline-block;
  position: relative;
  width: 42px;
  height: 42px;

  div {
    transform-origin: 21px 21px;
    animation: lds-spinner 1.2s linear infinite;

    &:after {
      content: " ";
      display: block;
      position: absolute;
      top: 2px;
      left: 19px;
      width: 4px;
      height: 12px;
      border-radius: 20%;
      background: #000;
    }

    @for $i from 0 through 11 {
      $value: 30;
      $unit: 0.1;

      &:nth-child(#{$i + 1}) {
        transform: rotate(#{$value * ($i)}deg);
        animation-delay: -#{(1 + $unit) - ($i * $unit)}s;
      }
    }
  }
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}