index.haml

.demo1
  .spinner
    - (1..20).each do 
      %i 
.demo2
  .spinner
    - (1..20).each do 
      %i
.demo3
  .spinner
    - (1..20).each do 
      %i
.demo4
  .spinner
    - (1..20).each do 
      %i
.demo5
  .spinner
    - (1..20).each do 
      %i
.demo6
  .spinner
    - (1..20).each do 
      %i
.demo7
  .spinner
    - (1..20).each do 
      %i
.demo8
  .spinner
    - (1..20).each do 
      %i

script.js

console.log("%cleiman0311@gmail.com","background-image:-webkit-gradient(linear,0% 0%,100% 0%,color-stop(0%,#0EF8D8),color-stop(20%,#BAF84A),color-stop(40%,#F7E22C),color-stop(60%,#F7AD51),color-stop(80%,#F76E8E),color-stop(100%,#AE37F9));padding:10px;background-origin:border-box;-webkit-background-clip:text;color:transparent;font-size:60px;text-transform:uppercase;")

style.less

@particles: 20;
@radius: 50; 

html, body {
  //overflow: hidden;
  margin: 0;
}

div[class^=demo]{
  float: left;
  width: 50%;
  height:600px;
  position: relative;
      background-image: -webkit-radial-gradient(center center,circle cover, #95A5A6 0%,#34495E 100%);
      background-image: -moz-radial-gradient(center center,circle cover, #95A5A6 0%,#34495E 100%);
  box-shadow: 0px 0px 100px 0px rgba(0,0,0,.2) inset;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  
  animation-name: rotate;
  animation-direction: reverse;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

i {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 52px;
  height: 52px;
  background: #fff;
  opacity: 1;
  border: 2px solid #ECF0F1;
  border-radius: 10px;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

i:nth-child(2n){
  background: #E74C3C;
}
i:nth-child(2n+1){
  background: #E67E22;
}

i:nth-child(3n){
  background: #2ECC71;
}

i:nth-child(3n+1){
  background: #9B59B6;
}

.loopingClass (@index,@father) when (@index =< @particles) {
  .father(@father) when (@father = demo1){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      width: (@index * 14) + 0px;
      height: (@index * 14) + 0px;
      margin-top: -(@index * 14) / 2 + 0px;
      margin-left: -(@index * 14) / 2 + 0px;
      z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 50% 50%;
      animation-delay: @index * (2s / @particles);
     }
  }
  .father(@father) when (@father = demo2){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      width: (@index * 14) + 0px;
      //height: (@index * 14) + 0px;
      margin-top: -(@index * 14) / 2 + 0px;
      margin-left: -(@index * 14) / 2 + 0px;
      z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 50% 50%;
      animation-delay: @index * (2s / @particles);
     }
  }
  .father(@father) when (@father = demo3){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      //width: (@index * 14) + 0px;
      //height: (@index * 14) + 0px;
      margin-top: -(@index * 14) / 2 + 0px;
      margin-left: -(@index * 14) / 2 + 0px;
      z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 50% 50%;
      animation-delay: @index * (2s / @particles);
     }
  }
  .father(@father) when (@father = demo4){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      width: (@index * 14) + 0px;
      //height: (@index * 14) + 0px;
      //margin-top: -(@index * 14) / 2 + 0px;
      margin-left: -(@index * 14) / 2 + 0px;
      //z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 30% 50%;
      //animation-delay: @index * (2s / @particles);
     }
  }
  .father(@father) when (@father = demo5){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      width: (@index * 14) + 0px;
      height: (@index * 14) + 0px;
      //margin-top: -(@index * 14) / 2 + 0px;
      //margin-left: -(@index * 14) / 2 + 0px;
      z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 50% 50%;
      animation-delay: @index * (2s / @particles);
     }
  }
  
  .father(@father) when (@father = demo6){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;  
      //width: 30px;
      //height:30px;
      width: (@index * 14) + 0px;
      //height: (@index * 14) + 0px;
      margin-top: -(@index * 14) / 2 + 0px;
      //margin-left: -(@index * 14) / 2 + 0px;
      z-index: @particles - @index;
      //transform:rotate( @angle + 0deg );
      
      transform-origin: 0% 10%;
      //animation-delay: @index * (2s / @particles);
     }
  }
  .father(@father) when (@father = demo7){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      width: (@index * 14) + 0px;
      //height: (@index * 14) + 0px;
      //margin-top: -(@index * 14) / 2 + 0px;
      margin-left: -(@index * 14) / 2 + 0px;
      //z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 30% 50%;
      animation-delay: @index * (2s / @particles);
     }
  }
  
  .father(@father) when (@father = demo8){
    .@{father} i:nth-child(@{index}) {

      @angle: @index / @particles * 360;      
      width: (@index * 14) + 0px;
      //height: (@index * 14) + 0px;
      //margin-top: -(@index * 14) / 2 + 0px;
      margin-left: -(@index * 14) / 2 + 0px;
      z-index: @particles - @index;
      transform:rotate( @angle + 0deg );
      
      transform-origin: 50% 50%;
      animation-delay: @index * (2s / @particles);
     }
  }
  
  .father(@father);
  .loopingClass(@index + 1, @father);
}



.loopingClass (1, demo1);
.loopingClass (1, demo2);
.loopingClass (1, demo3);
.loopingClass (1, demo4);
.loopingClass (1, demo5);
.loopingClass (1, demo6);
.loopingClass (1, demo7);
.loopingClass (1, demo8);

@keyframes spin {
  40% {
    border-radius: 30px;
    transform: rotate(180deg);
    background: #1ABC9C;
  }
}

@keyframes rotate {
  100% {
    transform: rotate( 360deg );
  }
}