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,9 +10,8 @@
   width    : 256px;
   margin   : 50px auto;
   display  : block;
-}
 
-.followingBalls {
+  .ball {
     background-color : @colorDark;
     position         : absolute;
     top              : 0;
@@ -20,29 +19,46 @@
     width            : 20px;
     height           : 20px;
     .border-radius(10px);
-  .animation-name(bounce_followingBallsG);
+    .animation-name(bounce);
     .animation-duration(1.9s);
     .animation-iteration-count(infinite);
     .animation-direction(linear);
-}
+  }
 
-#followingBallsG_1 {
+  #ball-1 {
     .animation-delay(0s);
-}
+  }
 
-#followingBallsG_2 {
+  #ball-2 {
     .animation-delay(0.19s);
-}
+  }
 
-#followingBallsG_3 {
+  #ball-3 {
     .animation-delay(0.38s);
-}
+  }
 
-#followingBallsG_4 {
+  #ball-4 {
     .animation-delay(0.57s);
-}
+  }
 
-@-moz-keyframes bounce_followingBallsG {
+  @keyframes bounce {
+    0% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
+
+    50% {
+      left             : 236px;
+      background-color : @colorLight;
+    }
+
+    100% {
+      left             : 0px;
+      background-color : @colorDark;
+    }
+  }
+
+  @-moz-keyframes bounce {
     0% {
       left             : 0px;
       background-color : @colorDark;
@@ -58,9 +74,9 @@
       background-color : @colorDark;
     }
 
-}
+  }
 
-@-webkit-keyframes bounce_followingBallsG {
+  @-webkit-keyframes bounce {
     0% {
       left             : 0px;
       background-color : @colorDark;
@@ -76,9 +92,9 @@
       background-color : @colorDark;
     }
 
-}
+  }
 
-@-ms-keyframes bounce_followingBallsG {
+  @-ms-keyframes bounce {
     0% {
       left             : 0px;
       background-color : @colorDark;
@@ -93,10 +109,9 @@
       left             : 0px;
       background-color : @colorDark;
     }
+  }
 
-}
-
-@-o-keyframes bounce_followingBallsG {
+  @-o-keyframes bounce {
     0% {
       left             : 0px;
       background-color : @colorDark;
@@ -111,22 +126,5 @@
       left             : 0px;
       background-color : @colorDark;
     }
-
-}
-
-@keyframes bounce_followingBallsG {
-  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>