<div class="loader">
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
</div>

@import "compass/css3";


$blockSize: 2em;
//$blockSize: 6vmin; // Try this in Firefox! Viewport based size, which doesn't work in Canary at the moment

// Play with these to see what you get
$delay: .065s;
$duration: .88s;
$startingColor: #fdfdfd;
$endingColor: #dadada;

// Calculate some values
$blockMargin: $blockSize / 3;
$loaderSize: $blockSize * 3 + $blockMargin * 2;

@mixin animation-delay( $delay ) {
  -webkit-animation-delay: $delay;
  animation-delay: $delay;
}

// Official syntax supported by IE10, FF16, Opera 12.1,
// so we're only going to add the webkit prefix
@mixin animation( $ani1:null, $ani2:null ) {
  @if ($ani2 != null) {
    -webkit-animation: $ani1, $ani2;
    animation: $ani1, $ani2;
  }
  
  @else if ($ani1 != null) {
    -webkit-animation: $ani1;
    animation: $ani1;
  }
}

body {
  text-align: center;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $loaderSize;
  height: $loaderSize;
  margin-left: -$loaderSize/2;
  margin-top: -$loaderSize/2;
}

.loader-block {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  width: $blockSize;
  height: $blockSize;
  background: $startingColor;
  @include animation(show $duration step-end infinite alternate,
    pulse $duration linear infinite alternate);
}



// Second
.loader-block:nth-child(1) {
  @include translate(0, 0);
  @include animation-delay(1 * $delay);
}

// Ninth
.loader-block:nth-child(2) {
  @include translate($blockSize + $blockMargin, 0);
  @include animation-delay(2 * $delay);
}

// Fourth
.loader-block:nth-child(3) {
  @include translate(($blockSize * 2) + ($blockMargin * 2), 0);
  @include animation-delay(3 * $delay);
}

// Sixth
.loader-block:nth-child(4) {
  @include translate(0, $blockSize + $blockMargin);
  @include animation-delay(5 * $delay);
}

// Third
.loader-block:nth-child(5) {
  @include translate($blockSize + $blockMargin, $blockSize + $blockMargin);
  @include animation-delay(2 * $delay);
}

// Eighth
.loader-block:nth-child(6) {
  @include translate(($blockSize * 2) + ($blockMargin * 2), $blockSize + $blockMargin);
  @include animation-delay(7 * $delay);
}

// Seventh
.loader-block:nth-child(7) {
  @include translate(0, ($blockSize * 2) + ($blockMargin * 2));
  @include animation-delay(6 * $delay);
}

// Fifth
.loader-block:nth-child(8) {
  @include translate($blockSize + $blockMargin, ($blockSize * 2) + ($blockMargin * 2));
  @include animation-delay(4 * $delay);
}

// First
.loader-block:nth-child(9) {
  @include translate(($blockSize * 2) + ($blockMargin * 2), ($blockSize * 2) + ($blockMargin * 2));
}


@-webkit-keyframes pulse {
  from,
  40% { 
    background: $startingColor;
  }
  to {
    background: $endingColor;
  }
}

@-webkit-keyframes show {
  from, 40% { opacity: 0; }
  41%, to { opacity: 1; }
}

@keyframes pulse {
  from,
  40% { 
    background: $startingColor;
  }
  to {
    background: $endingColor;
  }
}

@keyframes show {
  from, 40% { opacity: 0; }
  41%, to { opacity: 1; }
}


/* Body styling */
html,
body {
  height: 100%;
}

body {
  @include background(#999 radial-gradient(circle farthest-side, #333, #111));
}

// A CSS Loader based on gif (https://imgur.com/iWGr9AP)

// A pen by @Vestride