CSS Animated Spinner (in Rails)

_spinner.html.erb

<div class='spinner-container'>
  <div class='spinner'>
    <% 8.times do %>
      <div>
        <div></div>
      </div>
    <% end %>
  </div>
</div>

showcase.html.erb

<%= render 'spinner' %>

spinner.scss

@import 'utils';

$spinner-size: 24px;
$spinner-scale: strip-unit($spinner-size - 4px) / 168;
$spinner-color: #777;

.spinner-container {
  margin-right: $spinner-size;
  margin-bottom: $spinner-size;
  overflow: visible;
}

.spinner {
  position: relative;
  background: none;
  transform: scale($spinner-scale);

  & > div {
    width: 24px;
    height: 24px;
    position: absolute;
    margin-left: 4px;
    margin-top: 4px;

    & > div {
      width: 100%;
      height: 100%;
      border-radius: 15px;
      background: $spinner-color;
    }
  }

  @for $i from 1 through 8 {
    & > div:nth-of-type(#{$i}) {
      transform: translate(84px, 84px) rotate(#{45 * $i}deg) translate(70px, 0);
      & > div {
        animation: spinner 1s linear infinite;
        animation-delay: #{0.12 * ($i - 1)}s;
      }
    }
  }

}

@keyframes spinner {
  0% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0.1; transform: scale(1); }
}

utils.scss

// Remove the unit of a length
// @param {Number} $number - Number to remove unit from
// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}