From 00bb73a4231a0bc82872a183c6a0fa4f80c9e0b0 Mon Sep 17 00:00:00 2001
From: "kay.one" <kay.one@gmail.com>
Date: Sat, 29 Jun 2013 15:07:09 -0700
Subject: [PATCH] updated spinner view to use CSS3 instead of spinning font.

---
 UI/Content/base.less           |  12 +--
 UI/Content/spinner.less        | 132 +++++++++++++++++++++++++++++++++
 UI/Shared/SpinnerTemplate.html |   9 ++-
 UI/Shared/SpinnerView.js       |   3 +-
 4 files changed, 145 insertions(+), 11 deletions(-)
 create mode 100644 UI/Content/spinner.less

diff --git a/UI/Content/base.less b/UI/Content/base.less
index a32f6ccc6..0433cd8ab 100644
--- a/UI/Content/base.less
+++ b/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;
-  font-size: 16px;
-}
\ No newline at end of file
+  padding   : 4px 6px;
+  font-size : 16px;
+}
diff --git a/UI/Content/spinner.less b/UI/Content/spinner.less
new file mode 100644
index 000000000..b06cc3c42
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/UI/Shared/SpinnerTemplate.html b/UI/Shared/SpinnerTemplate.html
index ab1bf0b60..0f2eb6b6a 100644
--- a/UI/Shared/SpinnerTemplate.html
+++ b/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>
diff --git a/UI/Shared/SpinnerView.js b/UI/Shared/SpinnerView.js
index 80269ff6f..afaa742f2 100644
--- a/UI/Shared/SpinnerView.js
+++ b/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'
         });
     });