diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade
index ce671cdef..f3aa47048 100644
--- a/client/components/lists/listBody.jade
+++ b/client/components/lists/listBody.jade
@@ -23,14 +23,10 @@ template(name="listBody")
             i.fa.fa-plus
 
 template(name="spinnerList")
-  .sk-spinner.sk-spinner-wave.sk-spinner-list(
-    class=currentBoard.colorClass
+  .sk-spinner.sk-spinner-list(
+    class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.spinnerName}}"
     id="showMoreResults")
-    .sk-rect1
-    .sk-rect2
-    .sk-rect3
-    .sk-rect4
-    .sk-rect5
+    +spinnerRaw
 
 template(name="addCardForm")
   .minicard.minicard-composer.js-composer
diff --git a/client/components/main/spinner.jade b/client/components/main/spinner.jade
new file mode 100644
index 000000000..1c6a7aad2
--- /dev/null
+++ b/client/components/main/spinner.jade
@@ -0,0 +1,5 @@
+template(name="spinner")
+  +Template.dynamic(template=Spinner.getSpinnerTemplate)
+
+template(name="spinnerRaw")
+  +Template.dynamic(template=Spinner.getSpinnerTemplateRaw)
diff --git a/client/components/main/spinner.js b/client/components/main/spinner.js
new file mode 100644
index 000000000..8f9d4358f
--- /dev/null
+++ b/client/components/main/spinner.js
@@ -0,0 +1,17 @@
+function getSpinnerName() {
+  return 'Bounce'
+}
+
+Spinner = {
+  getSpinnerTemplate() {
+    return 'spinner' + getSpinnerName()
+  },
+
+  getSpinnerTemplateRaw() {
+    return 'spinner' + getSpinnerName() + 'Raw';
+  },
+
+  spinnerName: getSpinnerName().toLowerCase(),
+}
+
+Blaze.registerHelper('Spinner', Spinner);
diff --git a/client/components/main/spinner.tpl.jade b/client/components/main/spinner.tpl.jade
deleted file mode 100644
index 9310a6e5b..000000000
--- a/client/components/main/spinner.tpl.jade
+++ /dev/null
@@ -1,6 +0,0 @@
-.sk-spinner.sk-spinner-wave(class=currentBoard.colorClass)
-  .sk-rect1
-  .sk-rect2
-  .sk-rect3
-  .sk-rect4
-  .sk-rect5
diff --git a/client/components/main/spinner_bounce.jade b/client/components/main/spinner_bounce.jade
new file mode 100644
index 000000000..83bc4509c
--- /dev/null
+++ b/client/components/main/spinner_bounce.jade
@@ -0,0 +1,8 @@
+template(name="spinnerBounce")
+  .sk-spinner.sk-spinner-bounce(class=currentBoard.colorClass)
+    +spinnerBounceRaw
+
+template(name="spinnerBounceRaw")
+  .sk-bounce1
+  .sk-bounce2
+  .sk-bounce3
diff --git a/client/components/main/spinner_bounce.styl b/client/components/main/spinner_bounce.styl
new file mode 100644
index 000000000..7d9ab0248
--- /dev/null
+++ b/client/components/main/spinner_bounce.styl
@@ -0,0 +1,44 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-bounce {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+
+  div {
+    width: 18px;
+    height: 18px;
+    background-color: #333;
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .sk-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .sk-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
diff --git a/client/components/main/spinner_wave.jade b/client/components/main/spinner_wave.jade
new file mode 100644
index 000000000..1528bb42f
--- /dev/null
+++ b/client/components/main/spinner_wave.jade
@@ -0,0 +1,10 @@
+template(name="spinnerWave")
+  .sk-spinner.sk-spinner-wave(class=currentBoard.colorClass)
+    +spinnerWaveRaw
+
+template(name="spinnerWaveRaw")
+  .sk-rect1
+  .sk-rect2
+  .sk-rect3
+  .sk-rect4
+  .sk-rect5
diff --git a/client/components/main/spinner.styl b/client/components/main/spinner_wave.styl
similarity index 61%
rename from client/components/main/spinner.styl
rename to client/components/main/spinner_wave.styl
index 65c5fe62e..a82d39496 100644
--- a/client/components/main/spinner.styl
+++ b/client/components/main/spinner_wave.styl
@@ -1,21 +1,7 @@
 @import 'nib'
 
-/*
- * From https://github.com/tobiasahlin/SpinKit
- *
- * Usage:
- *
- *    <div class="sk-spinner sk-spinner-wave">
- *      <div class="sk-rect1"></div>
- *      <div class="sk-rect2"></div>
- *      <div class="sk-rect3"></div>
- *      <div class="sk-rect4"></div>
- *      <div class="sk-rect5"></div>
- *    </div>
- *
- */
-
-.sk-spinner {
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-wave {
   width: 50px;
   height: 50px;
   margin: auto;