<div class="spinner">
  <div id="square-1"></div>
  <div id="square-2"></div>
  <div id="square-3"></div>
  <div id="square-4"></div>
  <div id="square-5"></div>
  <div id="square-6"></div>
  <div id="square-7"></div>
  <div id="square-8"></div>
  <div id="square-9"></div>
  <div id="square-10"></div>
  <div id="square-11"></div>
  <div id="square-12"></div>
  <div id="square-13"></div>
  <div id="square-14"></div>
</div>

$size: 150px;
$dif: $size/14;
body {
  background-color: #e0f8bd;
  overflow:hidden;
}

.spinner {
  height: $size;
  width: $size;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%, 0);
  -moz-transform: translate(-50%, -50%, 0);
  -ms-transform: translate(-50%, -50%, 0);
  -o-transform: translate(-50%, -50%, 0);
  transform: translate(-50%, -50%, 0);

  div {
    position: absolute;
    border-radius: 10%;
    opacity: 0.7;
  }
}
@for $i from 1 through 14 {
  $red: random(256)-1;
  $green: random(256)-1;
  $blue: random(256)-1;

  @-webkit-keyframes rotate#{$i} {
    0%    { -webkit-transform: rotate(0deg) scale(1) translateY(-$size/2*($i - 1)*0.2) translateZ(0); }
    50% { -webkit-transform:  rotate($i*90deg) scale($i*0.1*2) translateY($size/2*($i - 1)*0.2) translateZ(0); }
    100%  { -webkit-transform: rotate($i*360deg) scale(1) translateY(-$size/2*($i - 1)*0.2) translateZ(0); }
  }
  @-moz-keyframes rotate#{$i} {
    0%    { -moz-transform: rotate(0deg) scale(1) translateY(-$size/2*($i - 1)*0.2) translateZ(0); }
    50% { -moz-transform:  rotate($i*90deg) scale($i*0.1*2) translateY($size/2*($i - 1)*0.2) translateZ(0); }
    100%  { -moz-transform: rotate($i*360deg) scale(1) translateY(-$size/2*($i - 1)*0.2) translateZ(0); }
  }
  @-o-keyframes rotate#{$i} {
    0%    { -o-transform: rotate(0deg) scale(1) translateY(-$size/2*($i - 1)*0.2) translateZ(0); }
    50% { -o-transform:  rotate($i*90deg) scale($i*0.1*2) translateY($size/2*($i - 1)*0.2) translateZ(0); }
    100%  { -o-transform: rotate($i*360deg) scale(1) translateY(-$size/2*($i - 1)*0.2) translateZ(0); }
  }

  
  #square-#{$i} {
    width: $size - $i * $dif;
    height: $size - $i * $dif;
    top: $i*$dif/2;
    left: $i*$dif/2;
    background-color: rgba($red, $green, $blue, 1);

    -webkit-animation: rotate#{$i} 8s infinite linear;
    -moz-animation: rotate#{$i} 8s infinite linear;
    -o-animation: rotate#{$i} 8s infinite linear;
    animation: rotate#{$i} 8s infinite linear;
  }
}