.spinner

@import "compass/css3";

/* vars */
$main: #e0c764;
$secondary: darken($main, 20);
$r: 15;
$d: $r * 2;
$t: 2000;

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;
  border-radius: 50%;

  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    width: #{$d/10}px;
    background-color: $secondary;
    border-radius: #{($d/10)/2}px;
    transform-origin: 50% 0%;
  }

  &:before {
    height: #{$r - ($d/10)-(($d/10))}px;
    left: #{$r - (($d/10)/2)}px;
    top: 50%;
    animation: spin #{$t}ms linear infinite;
  } 

  &:after {
    height: #{$r - ($d/10)}px;
    left: #{$r - (($d/10)/2)}px;
    top: 50%;
    animation: spin #{$t/4}ms linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// - Noel Delgado | @pixelia_me