@import "compass";
@import "lib/mixins";
$l:400px;
$a:80px;
$r:$a/2;
$R:$l/2 - $r;
$T:1s;
$bg0:skyblue;
$bg1:royalblue;
.load{
  @include square($l);
  position:relative;
  -webkit-perspective: 100px;
  -webkit-perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  .point{
    @include square($a);
    border-radius:50%;
    background:$bg0;
    position:absolute;
    margin-left:-$r;
    margin-top:-$r;
    -webkit-animation:shine linear $T/2 infinite alternate;
    &:nth-child(1){
      @include circle($R,0,$l/2,$l/2);
    }
    &:nth-child(2){
      @include circle($R,30deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*1;
    }
    &:nth-child(3){
      @include circle($R,60deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*2;
    }
    &:nth-child(4){
      @include circle($R,90deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*3;
    }
    &:nth-child(5){
      @include circle($R,120deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*4;
    }
    &:nth-child(6){
      @include circle($R,150deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*5;
    }
    &:nth-child(7){
      @include circle($R,180deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*6;
    }
    &:nth-child(8){
      @include circle($R,210deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*7;
    }
    &:nth-child(9){
      @include circle($R,240deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*8;
    }
    &:nth-child(10){
      @include circle($R,270deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*9;
    }
    &:nth-child(11){
      @include circle($R,300deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*10;
    }
    &:nth-child(12){
      @include circle($R,330deg,$l/2,$l/2);
      -webkit-animation-delay:$T/12*11;
    }
  }
}
@-webkit-keyframes shine{
  100%{
    -webkit-transfom:translate3d(0,0,30px);
    @include square($a/3);
    margin-left:-$a/3/2;
    margin-top:-$a/3/2;
    background:$bg1;
    //box-shadow:inset 0 0 20px rgba(#000,.3);
  }
}