updated spinner

UI/Content/prefixer.less

@@ -73,48 +73,56 @@
     -moz-animation: @args;
     -ms-animation: @args;
     -o-animation: @args;
+    animation: @args;
 }
 .animation-delay(@delay) {
     -webkit-animation-delay: @delay;
     -moz-animation-delay: @delay;
     -ms-animation-delay: @delay;
     -o-animation-delay: @delay;
+    animation-delay: @delay;
 }
 .animation-direction(@direction) {
     -webkit-animation-direction: @direction;
     -moz-animation-direction: @direction;
     -ms-animation-direction: @direction;
     -o-animation-direction: @direction;
+    animation-direction: @direction;
 }
 .animation-duration(@duration) {
     -webkit-animation-duration: @duration;
     -moz-animation-duration: @duration;
     -ms-animation-duration: @duration;
     -o-animation-duration: @duration;
+    animation-duration: @duration;
 }
 .animation-iteration-count(@count) {
     -webkit-animation-iteration-count: @count;
     -moz-animation-iteration-count: @count;
     -ms-animation-iteration-count: @count;
     -o-animation-iteration-count: @count;
+    animation-iteration-count: @count;
 }
 .animation-name(@name) {
     -webkit-animation-name: @name;
     -moz-animation-name: @name;
     -ms-animation-name: @name;
     -o-animation-name: @name;
+    animation-name: @name;
 }
 .animation-play-state(@state) {
     -webkit-animation-play-state: @state;
     -moz-animation-play-state: @state;
     -ms-animation-play-state: @state;
     -o-animation-play-state: @state;
+    animation-play-state: @state;
 }
 .animation-timing-function(@function) {
     -webkit-animation-timing-function: @function;
     -moz-animation-timing-function: @function;
     -ms-animation-timing-function: @function;
     -o-animation-timing-function: @function;
+    animation-timing-function: @function;
 }
 
 

UI/Content/spinner.less

@@ -10,123 +10,121 @@
   width    : 256px;
   margin   : 50px auto;
   display  : block;
-}
-
-.followingBalls {
-  background-color : @colorDark;
-  position         : absolute;
-  top              : 0;
-  left             : 0;
-  width            : 20px;
-  height           : 20px;
-  .border-radius(10px);
-  .animation-name(bounce_followingBallsG);
-  .animation-duration(1.9s);
-  .animation-iteration-count(infinite);
-  .animation-direction(linear);
-}
-
-#followingBallsG_1 {
-  .animation-delay(0s);
-}
-
-#followingBallsG_2 {
-  .animation-delay(0.19s);
-}
-
-#followingBallsG_3 {
-  .animation-delay(0.38s);
-}
-
-#followingBallsG_4 {
-  .animation-delay(0.57s);
-}
 
-@-moz-keyframes bounce_followingBallsG {
-  0% {
-    left             : 0px;
+  .ball {
     background-color : @colorDark;
+    position         : absolute;
+    top              : 0;
+    left             : 0;
+    width            : 20px;
+    height           : 20px;
+    .border-radius(10px);
+    .animation-name(bounce);
+    .animation-duration(1.9s);
+    .animation-iteration-count(infinite);
+    .animation-direction(linear);
   }
 
-  50% {
-    left             : 236px;
-    background-color : @colorLight;
-  }
-
-  100% {
-    left             : 0px;
-    background-color : @colorDark;
+  #ball-1 {
+    .animation-delay(0s);
   }
 
-}
-
-@-webkit-keyframes bounce_followingBallsG {
-  0% {
-    left             : 0px;
-    background-color : @colorDark;
+  #ball-2 {
+    .animation-delay(0.19s);
   }
 
-  50% {
-    left             : 236px;
-    background-color : @colorLight;
+  #ball-3 {
+    .animation-delay(0.38s);
   }
 
-  100% {
-    left             : 0px;
-    background-color : @colorDark;
+  #ball-4 {
+    .animation-delay(0.57s);
   }
 
-}
-
-@-ms-keyframes bounce_followingBallsG {
-  0% {
-    left             : 0px;
-    background-color : @colorDark;
+  @keyframes bounce {
+    0% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
+
+    50% {
+      left             : 236px;
+      background-color : @colorLight;
+    }
+
+    100% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
   }
 
-  50% {
-    left             : 236px;
-    background-color : @colorLight;
-  }
+  @-moz-keyframes bounce {
+    0% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
 
-  100% {
-    left             : 0px;
-    background-color : @colorDark;
-  }
+    50% {
+      left             : 236px;
+      background-color : @colorLight;
+    }
 
-}
+    100% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
 
-@-o-keyframes bounce_followingBallsG {
-  0% {
-    left             : 0px;
-    background-color : @colorDark;
   }
 
-  50% {
-    left             : 236px;
-    background-color : @colorLight;
-  }
+  @-webkit-keyframes bounce {
+    0% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
 
-  100% {
-    left             : 0px;
-    background-color : @colorDark;
-  }
+    50% {
+      left             : 236px;
+      background-color : @colorLight;
+    }
 
-}
+    100% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
 
-@keyframes bounce_followingBallsG {
-  0% {
-    left             : 0px;
-    background-color : @colorDark;
   }
 
-  50% {
-    left             : 236px;
-    background-color : @colorLight;
+  @-ms-keyframes bounce {
+    0% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
+
+    50% {
+      left             : 236px;
+      background-color : @colorLight;
+    }
+
+    100% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
   }
 
-  100% {
-    left             : 0px;
-    background-color : @colorDark;
+  @-o-keyframes bounce {
+    0% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
+
+    50% {
+      left             : 236px;
+      background-color : @colorLight;
+    }
+
+    100% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
   }
 }

UI/Shared/SpinnerTemplate.html

@@ -1,8 +1,8 @@
 <div class="row">
     <div id="followingBalls">
-        <div id="followingBallsG_1" class="followingBalls"></div>
-        <div id="followingBallsG_2" class="followingBalls"></div>
-        <div id="followingBallsG_3" class="followingBalls"></div>
-        <div id="followingBallsG_4" class="followingBalls"></div>
+        <div id="ball-1" class="ball"></div>
+        <div id="ball-2" class="ball"></div>
+        <div id="ball-3" class="ball"></div>
+        <div id="ball-4" class="ball"></div>
     </div>
 </div>