$numberOf: 50;
$diameter: .214em;

@-webkit-keyframes go { 
    0% { transform: rotate(0deg) scale(1); } 
    50% { transform: rotate(180deg) scale(2); } 
    100% { transform: rotate(360deg) scale(0); } 
}
@-moz-keyframes go { 
    0% { transform: rotate(0deg) scale(1); } 
    50% { transform: rotate(180deg) scale(2); } 
    100% { transform: rotate(360deg) scale(0); }
}
@keyframes go {     
  0% { transform: rotate(0deg) scale(2); } 
    50% { transform: rotate(180deg) scale(1); } 
    100% { transform: rotate(360deg) scale(0); } }

body {
  background: #212121;
  -webkit-filter: contrast(5);
}

.rings {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius:50%;
  -webkit-filter: blur(1px);
  -webkit-animation-fill-mode: both;
  width: $diameter; 
  height: $diameter;
  -webkit-animation: go 10s linear  
    infinite;
  -moz-animation: go 10s linear  
    infinite;
  animation: go 10s linear infinite;
 
@for $i from 0 to $numberOf {
  $spacing: ($i + 2)*2;
  $circle: 180deg/$spacing;
  $rad: ($i+1)*$diameter;
  $shadow: ();
        
@for $j from 0 to $spacing {
  $shadow: $shadow,        
  $rad*cos($j*$circle*6)    
  $rad*sin($j*$circle*6)  
  hsl($j*10,100%, 50%);  
 }
    &:nth-child(#{$i + 5}) {
      box-shadow: $shadow;
      -webkit-animation-delay: pow($i,  
        .75)*1.5s;
      -moz-animation-delay: pow($i,  
        .75)*1.5s;
      animation-delay: pow($i,  
        .75)*1.5s;      
    }  
  }
}