programmatic number of circles

stylesheets/style.scss

@@ -1,3 +1,5 @@
+$circles: 4;
+
 * {
   margin: 0;
   padding: 0;
@@ -81,7 +83,6 @@ body {
   position: absolute;
   width: 15%;
   z-index: 0;
-  -webkit-animation: humanreverse 100s linear infinite;
   animation: humanreverse 100s linear infinite;
   box-shadow: none !important;
 }
@@ -98,7 +99,6 @@ body {
   text-align: left;
   .avatars {
     display: block;
-    -webkit-animation: rotat 100s linear infinite;
     animation: rotat 100s linear infinite;
     /*left:0;
     top:0;*/
@@ -122,37 +122,28 @@ body {
   border: 5px solid white;
 }
 
-.circle-1 {
-  width: 80%;
-  margin: 3% auto;
-  position: relative;
+$i: 0;
+@while $i < $circles {
+  .circle-$i {
+    $width: 80% - $i*5%;
+    width: $width;
+    margin: ((100% - $width) / 2) auto;
+    position: relative;
+  }
+  $i: $i + 1;
 }
 
+.circle-$circles {
+  animation-play-state: paused;
+}
 .circles {
   border: 1px dashed;
   border-radius: 50%;
 }
 
-.circle-2 {
-  width: 76%;
-  margin: 13% auto;
-}
-
-.circle-3 {
-  width: 70%;
-  margin: 15% auto;
-}
-
-.circle-4 {
-  width: 60%;
-  margin: 20% auto;
-}
-
 .all .avatars:hover {
-  -webkit-animation-play-state: paused;
   animation-play-state: paused;
   .humans {
-    -webkit-animation-play-state: paused;
     animation-play-state: paused;
   }
 }

userlist.php

@@ -122,18 +122,17 @@ function imbb_usergalaxy() {
         }
       }
 ?>
-          <div class="circles circle-4">
-<?php if (isset($posts[0])) {
-foreach ($posts[0] as $post) {
-          echo '<img src="'.get_post_meta( $post->ID, 'imbb_image', TRUE ).'">';
-          $i++;
-        }
-      }
-?>
-          </div>
 	      </div>
 	    </div>
 	  </div>
+    <div class="circles circle-4">
+<?php if (isset($posts[0])) {
+  foreach ($posts[0] as $post) {
+    echo '<img src="'.get_post_meta( $post->ID, 'imbb_image', TRUE ).'">';
+    $i++;
+  }
+} ?>
+   </div>
 	</div>
 </div>
 <?php