<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import "compass/css3";

$unit-alpha: 8em;
$unit-beta: 50%;
$unit-gamma: 2.25s;
$unit-delta: .75;

$color-alpha: rgba(#e74c3c, $unit-delta);
$color-beta: rgba(#e67e22, $unit-delta);
$color-gamma: rgba(#8e44ad, $unit-delta);
$color-delta: rgba(#2980b9, $unit-delta);

body {
  background: url(https://s.cdpn.io/1202/tweed.png);
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $unit-alpha;
  height: $unit-alpha;
  margin: (-$unit-alpha / 2) 0 0 (-$unit-alpha / 2);
  overflow: hidden;
  background: rgba(#000, .35);
  
  > div {
    position: absolute;
    width: $unit-alpha;
    height: $unit-alpha;
    animation: alpha $unit-gamma linear infinite forwards;
    background: $color-alpha;
    
    &:nth-child(1) {
      top: -$unit-beta;
      left: -$unit-beta;
    }
      
    &:nth-child(2) {
      top: -$unit-beta;
      right: -$unit-beta;
    }
    
    &:nth-child(3) {
      bottom: -$unit-beta;
      right: -$unit-beta;
    }
      
    &:nth-child(4) {
      bottom: -$unit-beta;
      left: -$unit-beta;
    }
  }
}

@keyframes alpha {
  0% {
    @include transform(rotate(0));
    background: $color-alpha;
  }
  
  25% {
    background: $color-beta;
  }
  
  50% {
    border-radius: 50%;
    background: $color-gamma;
  }
  
  75% {
    background: $color-delta;
  }
  
  100% {
    @include transform(rotate(360deg));
    background: $color-alpha;
  }
}

/*
 * Liquid Loading
 *
 * A simple loading animation.
 *
 * And this is her brother, the Ultra Liquid Loading animation.
 * https://codepen.io/TimPietrusky/pen/HuvDg
 *
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */