$elements:80;
$elementsPerRow:10;
$animationDelayIncrease:.005;
$animationTime:1s;
$animationType:linear;
$circleSize:50;
$smallCircleSize:10;
$color:red;


@for $i from 1 through $elements {
  .circle:nth-of-type(#{$i}) {
    animation-delay:$animationDelayIncrease*$i+s;
  }
}

.circle {
  display:inline-block;
  position:relative;
  animation:animation $animationTime $animationType infinite;
  width:$circleSize+px;
  height:$circleSize+px;
  border-radius:100%;
}


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

.circle:before {
  content:'';
  position:absolute;
  top:49%;
  left:0px;
  width:$smallCircleSize+px;
  height:$smallCircleSize+px;
  background:$color;
  border-radius:100%;
}

.circle:after {
  content:'';
  position:absolute;
  top:58%;
  right:0px;
  width:$smallCircleSize+px;
  height:$smallCircleSize+px;
  background:linear-gradient(90deg,$color, transparent);
  width:100%;
  height:2px;
}


.circles {
  margin:0px auto;
  width:(($elementsPerRow+1)*$circleSize)+px;
}

.circles:hover .circle {
  box-shadow:inset 0 0 5px $color;
}