A CodePen by noeldelgado.

index.haml

.spinner

style.scss

@import "compass";
$main: #e0c764;
$secondary: darken($main, 20);

$r: 15;
$d: $r * 2;
$t: 2000;

@mixin animation($value) {
  -webkit-animation: $value;
     -moz-animation: $value;
      -ms-animation: $value;
       -o-animation: $value;
          animation: $value;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {@content;}
  @-moz-keyframes    #{$name} {@content;}
  @-ms-keyframes     #{$name} {@content;}
  @keyframes         #{$name} {@content;}
}

html {
  height: 100%;
  background-color: $main;
  @include background-image(radial-gradient(center, ellipse cover, lighten($main, 5) 0%, darken($main, 5) 100%));
}

.spinner {
  width: #{$d}px;
  height: #{$d}px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -#{$d/2}px;
  margin-left: -#{$d/2}px;
  border: #{$d/10}px solid $secondary;
  @include border-radius(50%);
  &::before,
  &::after {
    content: "";
    position: absolute;
    display: block;
    width: #{$d/10}px;
    background-color: $secondary;
    @include border-radius(#{($d/10)/2}px);
  }
  &::before {
    height: #{$r - ($d/10)-(($d/10))}px;
    left: #{$r - (($d/10)/2)}px;
    top: 50%;
    @include animation(spin #{$t}ms linear infinite);
    @include transform-origin(center, top);
  } 
  &::after {
    height: #{$r - ($d/10)}px;
    left: #{$r - (($d/10)/2)}px;
    top: 50%;
    @include animation(spin #{$t/4}ms linear infinite);
    @include transform-origin(center, top);
  }
}
 
@include keyframes(spin) {
  to {
    @include transform(rotate(360deg));
  }
}