<div id="load-wrapper">
  <div class="load load-1">
    <div class="load-object load-object-1"></div>
  </div>
  <div class="load load-2">
    <div class="load-object load-object-2"></div>
  </div>
  <div class="load load-3">
    <div class="load-object load-object-3"></div>
  </div>
  <div class="load load-4">
    <div class="load-object load-object-4"></div>
  </div>
  <div class="load load-5">
    <div class="load-object load-object-5"></div>
  </div>
  <div class="load load-6">
    <div class="load-object load-object-6"></div>
  </div>
   <div class="load load-7">
    <div class="load-object load-object-7"></div>
  </div>
  <div class="load load-8">
    <div class="load-object load-object-8"></div>
  </div>
  <div class="load load-9">
    <div class="load-object load-object-9"></div>
  </div>
  <div class="load load-10">
    <div class="load-object load-object-10"></div>
  </div>
</div>

@import "compass/css3";

/**
 * Variables.
 */
$circles: 10;
$degrees: 360/$circles;
$circle-width: 30px;
$wrapper: 150px;

/**
 * Keyframes.
 */
@-webkit-keyframes shrink { 
  0% { 
    height: $circle-width;
    width: $circle-width; 
  } 
  100% { 
    height: $circle-width/2;
    width: $circle-width/2; 
  }
}
@-webkit-keyframes hide { 
  0% { 
    opacity: 1; 
  } 
  100% { 
    opacity: 0; 
  }
}
@keyframes shrink { 
  0% { 
    height: $circle-width;
    width: $circle-width; 
  } 
  100% { 
    height: $circle-width/2;
    width: $circle-width/2; 
  }
}
@keyframes hide { 
  0% { 
    opacity: 1; 
  } 
  100% { 
    opacity: 0; 
  }
}

/**
 * Styles.
 */
body {
  background-color: #000;
}

#load-wrapper {
  background-color: #000;
  display: block;
  height: $wrapper;
  left: calc(50% - 75px);
  position: fixed;
  top: calc(50% - 75px);
  width: $wrapper;
}

.load {
  -webkit-animation: hide 1s infinite;
  animation: hide 1s infinite;
  height: inherit;
  opacity: 0;
  position: absolute;
  width: inherit;
}

.load-object {
  -webkit-animation: shrink 1s infinite;
  animation: shrink 1s infinite;
  background-color: #fff;
  height: $circle-width;
  left: calc(50% - 15px);
  position: absolute;
  width: $circle-width;
  
  @include border-radius(50%);
}

@for $i from 1 through $circles {
  .load-#{$i} {
    -webkit-animation-delay: 100ms * $i;
    animation-delay: 100ms * $i;
    @include transform(rotate($degrees * $i + 0deg));
    
  }
  .load-object-#{$i} {
    -webkit-animation-delay: 100ms * $i;
    animation-delay: 100ms * $i;
  }
}

// No Javascript needed.