YET ANOTHER SPINNER MIXIN

index.haml

.wrapper

  .spin-container
    %figure.spinner-default
      - (1..14).each do
        %span.arm

  .spin-container
    %figure.spinner-blue
      - (1..10).each do
        %span.arm

  .spin-container
    %figure.spinner-red
      - (1..3).each do
        %span.arm

  .spin-container
    %figure.spinner-green
      - (1..24).each do
        %span.arm
        
  .spin-container
    %figure.spinner-dots
      - (1..4).each do
        %span.arm
        
%h1
  a spinner mixin

style.scss

html, body {
  margin: 0;
}
body {
  background: #f9f9f9;
  font-family: Helvetica, Arial, sans-serif;
}
h1, h3 {
  text-align: center;
  color: #c4c4c4;
  font-weight: 200;
  margin-bottom: 0;
}
h3 {
  margin-top: 0;
}
figure {
  margin: 0;
}


.wrapper {
  margin: 100px auto 0px;
  text-align: center;
}

.spin-container {
  margin: 0px 20px;
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
}

@mixin spinner(
  $size: 12px,
  $arm_width: 2px,
  $arm_count: 14,
  $color: #303030,
  $time: 2s,
  $shimmer: true) {
  
  position: absolute;
  width: 0px;
  height: 0px;
  top: 50%; left: 50%;
  display: block;
  transform-origin: 0% 0%;
  
  // fade in no less than 1s
  @if $time > 1 {
  animation:
    spin $time linear infinite,
    fade-in $time/4 ease-in-out;
  } @else {
    animation:
    spin $time linear infinite,
    fade-in $time ease-in-out;
  }
    
  .arm {
    height: $arm_width;
    width: $size;
    position: absolute;
    background: $color;
    border-radius: $arm_width / 2;
    transform-origin: 0px 0px;
    
    // add the shimmer
    @if $shimmer == true {
      opacity: 0;
      animation: shimmer $time/2 linear infinite;
    }

    @for $i from 1 through $arm_count {
      $ratio: $i / $arm_count;

      &:nth-child(#{$i}) {
        animation-delay: -1*($ratio * ($time/2));
        transform:
          rotate((360*$ratio)+deg)
          translate($size, 0px);
      }
    }
  }
    
  
}
.spinner-default {
  @include spinner();
}

.spinner-blue {
  @include spinner(
    $size: 10px,
    $arm_width: 4px,
    $arm_count: 10,
    $color: #2b8c99,
    $time: 3.5s,
    $shimmer: true
  )
}

.spinner-red {
  @include spinner(
    $size: 12px,
    $arm_width: 2px,
    $arm_count: 3,
    $color: #a83b2a,
    $time: 1s,
    $shimmer: false
  )
}

.spinner-green {
  @include spinner(
    $size: 8px,
    $arm_width: 1px,
    $arm_count: 24,
    $color: #69a614,
    $time: 4s,
    $shimmer: true
  )
}

.spinner-dots {
  @include spinner(
    $size: 8px,
    $arm_width: 8px,
    $arm_count: 4,
    $color: #000,
    $time: 2s,
    $shimmer: true
  )
}



@keyframes spin {
  0% { 
    // translating for centering
    transform: 
      translateX(-50%)
      translateY(-50%)
      rotate(-360deg)
  }
  100% { 
    // translating for centering
    transform:
      translateX(-50%)
      translateY(-50%)
      rotate(0deg)
    }
}

@keyframes shimmer {
  0% { 
    opacity: 0.1
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0.1
  }
}


@keyframes fade-in {
  0% { opacity: 1 }
  0.5% { opacity: 0 }
  100% { opacity: 1 }
}

YET ANOTHER SPINNER MIXIN.markdown

YET ANOTHER SPINNER MIXIN

Learning HAML and SCSS.

A Pen by Jake Albaugh on CodePen.

License.