body{
  background:#2c3e50;
}
.mega-container{
  width:500px;
  height:500px;
  overflow:hidden;
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
}
.container{
  width:1500px;
  clear:both;
}
.container  div{
  height:7px;
  width:7px;
  float:left;
  margin-right:25px;
  margin-bottom:25px;
  border-radius:50%;
  background-color:#fff;
  -webkit-transform-origin:250% 250%;
  transform-origin:250% 250%;
  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

$lower : 1;
$upper : 100;


@for $i from $lower through $upper{
  .container div:nth-child( #{$i} ){
    -webkit-animation-delay:#{-$i*150}ms;
  }
}
@for $j from 1 through 20{
  .container:nth-child( #{$j} ){
    margin-left:-#{$j*30}px;
  }
}