updated spinner view to use CSS3 instead of spinning font.

UI/Content/base.less

@@ -9,6 +9,7 @@
 @import "../shared/styles/clickable";
 @import "prefixer";
 @import "icons";
+@import "spinner";
 
 .progress {
   width         : 125px;
@@ -61,11 +62,6 @@
   padding     : 30px;
 }
 
-.nz-spinner {
-  .text-center;
-  font-size : 56px;
-  padding   : 30px;
-}
 
 .page-toolbar {
   margin-top    : 10px;
@@ -94,6 +90,6 @@
 }
 
 .label-large {
-  padding: 4px 6px;
+  padding   : 4px 6px;
-  font-size: 16px;
+  font-size : 16px;
 }

UI/Content/spinner.less

@@ -0,0 +1,132 @@
+@import "prefixer";
+@import "bootstrap/variables";
+
+@colorDark : @grayDark;
+@colorLight : @grayLighter;
+
+#followingBalls {
+  position : relative;
+  height   : 20px;
+  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;
+    background-color : @colorDark;
+  }
+
+  50% {
+    left             : 236px;
+    background-color : @colorLight;
+  }
+
+  100% {
+    left             : 0px;
+    background-color : @colorDark;
+  }
+
+}
+
+@-webkit-keyframes bounce_followingBallsG {
+  0% {
+    left             : 0px;
+    background-color : @colorDark;
+  }
+
+  50% {
+    left             : 236px;
+    background-color : @colorLight;
+  }
+
+  100% {
+    left             : 0px;
+    background-color : @colorDark;
+  }
+
+}
+
+@-ms-keyframes bounce_followingBallsG {
+  0% {
+    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;
+  }
+
+  100% {
+    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 +1,8 @@
-<i class="icon-spinner icon-spin"/>
+<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>
+</div>

UI/Shared/SpinnerView.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict';
 
 define(
     [
@@ -6,7 +6,6 @@ define(
     ], function (Marionette) {
         return Marionette.ItemView.extend({
             template : 'Shared/SpinnerTemplate',
-            className: 'nz-spinner row'
         });
     });