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;

  }

}

​

​