diff --git a/app/assets/javascripts/admin/templates/email_preview_digest.hbs b/app/assets/javascripts/admin/templates/email_preview_digest.hbs
index abd414dbdc5..1e56304d859 100644
--- a/app/assets/javascripts/admin/templates/email_preview_digest.hbs
+++ b/app/assets/javascripts/admin/templates/email_preview_digest.hbs
@@ -19,7 +19,7 @@
 </div>
 
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{else}}
   {{#if showHtml}}
     {{{html_content}}}
diff --git a/app/assets/javascripts/admin/templates/flags.hbs b/app/assets/javascripts/admin/templates/flags.hbs
index 2b34210b598..d5756938b17 100644
--- a/app/assets/javascripts/admin/templates/flags.hbs
+++ b/app/assets/javascripts/admin/templates/flags.hbs
@@ -9,7 +9,7 @@
 
 <div class="admin-container">
   {{#if loading}}
-    <div class='spinner'></div>
+    {{loading-spinner}}
   {{else}}
     {{#if length}}
       <table class='admin-flags'>
@@ -160,7 +160,7 @@
         </tbody>
       </table>
       {{#if view.loading}}
-        <div class='spinner'></div>
+        {{loading-spinner}}
       {{/if}}
 
     {{else}}
diff --git a/app/assets/javascripts/admin/templates/logs/screened_emails.hbs b/app/assets/javascripts/admin/templates/logs/screened_emails.hbs
index 68704f8ee00..a3a2bb8bd49 100644
--- a/app/assets/javascripts/admin/templates/logs/screened_emails.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened_emails.hbs
@@ -1,7 +1,7 @@
 <p>{{i18n admin.logs.screened_emails.description}}</p>
 
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{else}}
   {{#if model.length}}
 
diff --git a/app/assets/javascripts/admin/templates/logs/screened_ip_addresses.hbs b/app/assets/javascripts/admin/templates/logs/screened_ip_addresses.hbs
index 042116be1f4..7b61f357bf4 100644
--- a/app/assets/javascripts/admin/templates/logs/screened_ip_addresses.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened_ip_addresses.hbs
@@ -4,7 +4,7 @@
 <br/>
 
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{else}}
   {{#if model.length}}
 
diff --git a/app/assets/javascripts/admin/templates/logs/screened_urls.hbs b/app/assets/javascripts/admin/templates/logs/screened_urls.hbs
index e20c57ed265..077ae151ed0 100644
--- a/app/assets/javascripts/admin/templates/logs/screened_urls.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened_urls.hbs
@@ -1,7 +1,7 @@
 <p>{{i18n admin.logs.screened_urls.description}}</p>
 
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{else}}
   {{#if model.length}}
 
diff --git a/app/assets/javascripts/admin/templates/logs/staff_action_logs.hbs b/app/assets/javascripts/admin/templates/logs/staff_action_logs.hbs
index 9216c394af2..e422308d620 100644
--- a/app/assets/javascripts/admin/templates/logs/staff_action_logs.hbs
+++ b/app/assets/javascripts/admin/templates/logs/staff_action_logs.hbs
@@ -45,7 +45,7 @@
 
   {{#if loading}}
     <br/>
-    <div class='spinner'></div>
+    {{loading-spinner}}
   {{else}}
     {{#if model.length}}
       {{view "staff-action-logs-list" content=controller}}
diff --git a/app/assets/javascripts/admin/templates/user_badges.hbs b/app/assets/javascripts/admin/templates/user_badges.hbs
index 5b241553786..dfe9ed4690f 100644
--- a/app/assets/javascripts/admin/templates/user_badges.hbs
+++ b/app/assets/javascripts/admin/templates/user_badges.hbs
@@ -7,7 +7,7 @@
 </div>
 
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{else}}
   <div class='admin-container user-badges'>
     <h2>{{i18n admin.badges.grant_badge}}</h2>
diff --git a/app/assets/javascripts/admin/templates/users_list.hbs b/app/assets/javascripts/admin/templates/users_list.hbs
index c9d760bcdb5..352f15b3ab1 100644
--- a/app/assets/javascripts/admin/templates/users_list.hbs
+++ b/app/assets/javascripts/admin/templates/users_list.hbs
@@ -38,7 +38,7 @@
   </div>
 
   {{#if loading}}
-    <div class='spinner'></div>
+    {{loading-spinner}}
   {{else}}
     {{#if model.length}}
       <table class='table'>
diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6
index 4009ea471b9..144337c36ff 100644
--- a/app/assets/javascripts/discourse/controllers/topic.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic.js.es6
@@ -510,9 +510,11 @@ export default ObjectController.extend(Discourse.SelectedPostsCount, {
   }.property('isPrivateMessage'),
 
   loadingHTML: function() {
-    return "<div class='spinner'></div>";
+    return "{{loading-spinner}}";
   }.property(),
 
+
+
   recoverTopic: function() {
     this.get('content').recover();
   },
diff --git a/app/assets/javascripts/discourse/helpers/loading-spinner.es6 b/app/assets/javascripts/discourse/helpers/loading-spinner.es6
new file mode 100644
index 00000000000..7ff1438cd37
--- /dev/null
+++ b/app/assets/javascripts/discourse/helpers/loading-spinner.es6
@@ -0,0 +1,4 @@
+Handlebars.registerHelper('loading-spinner', function(property, options) {
+    var spinner = "<div class='spinner-wrap'><div class='spinner'><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>";
+    return new Handlebars.SafeString(spinner);
+});
diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs
index 5f68cf2ddf6..9c585d855e0 100644
--- a/app/assets/javascripts/discourse/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/show.hbs
@@ -36,11 +36,11 @@
       {{/each}}
     </div>
     {{#if canLoadMore}}
-      <div class='spinner'></div>
+      {{loading-spinner}}
     {{/if}}
   {{else}}
     {{#unless userBadgesLoaded}}
-      <div class='spinner'></div>
+      {{loading-spinner}}
     {{/unless}}
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs b/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
index 02d90715ae8..32802cca7a0 100644
--- a/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
+++ b/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
@@ -56,5 +56,5 @@
     </div>
   {{/if}}
 {{else}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 0a12c2389b8..7dd2e37f041 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -1,4 +1,4 @@
-<div class='spinner'></div>
+{{loading-spinner}}
 
 <div class='contents'>
 
diff --git a/app/assets/javascripts/discourse/templates/discovery.hbs b/app/assets/javascripts/discourse/templates/discovery.hbs
index 3c143c9780b..eb3a50edb5c 100644
--- a/app/assets/javascripts/discourse/templates/discovery.hbs
+++ b/app/assets/javascripts/discourse/templates/discovery.hbs
@@ -11,7 +11,7 @@
 </div>
 
 <div {{bind-attr class="loadingSpinner::hidden"}}>
-  <div class='spinner'></div>
+  {{loading-spinner}}
 </div>
 
 
diff --git a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
index e24b34855b9..0c168e65210 100644
--- a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
@@ -53,5 +53,5 @@
     </div>
   {{/if}}
 {{else}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 5f251277bdb..d64415a92cb 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -73,7 +73,7 @@
           {{render 'topic-progress'}}
 
           {{#if postStream.loadingAbove}}
-            <div class='spinner'></div>
+            {{loading-spinner}}
           {{/if}}
 
           {{#unless postStream.loadingFilter}}
@@ -90,7 +90,7 @@
           {{/unless}}
 
           {{#if postStream.loadingBelow}}
-            <div class='spinner'></div>
+            {{loading-spinner}}
           {{/if}}
         </div>
         <div id='topic-bottom'></div>
@@ -137,13 +137,13 @@
         {{/if}}
       </div>
       {{#if retrying}}
-        <div class='spinner'></div>
+        {{loading-spinner}}      
       {{/if}}
     {{/if}}
     </div>
   {{else}}
     <div class='container'>
-      <div class='spinner'></div>
+      {{loading-spinner}}
     </div>
   {{/if}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/user/invited.hbs b/app/assets/javascripts/discourse/templates/user/invited.hbs
index 6432bad3f40..17802c836c2 100644
--- a/app/assets/javascripts/discourse/templates/user/invited.hbs
+++ b/app/assets/javascripts/discourse/templates/user/invited.hbs
@@ -70,7 +70,7 @@
         {{/each}}
       </table>
       {{#if invitesLoading}}
-        <div class='spinner'></div>
+        {{loading-spinner}}
       {{/if}}
 
     {{else}}
diff --git a/app/assets/javascripts/discourse/templates/user/notifications.hbs b/app/assets/javascripts/discourse/templates/user/notifications.hbs
index e1c280b530e..52427b1a34f 100644
--- a/app/assets/javascripts/discourse/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/user/notifications.hbs
@@ -23,7 +23,7 @@
 {{/each}}
 
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{/if}}
 {{#unless canLoadMore}}
   <div class='end-of-stream'></div>
diff --git a/app/assets/javascripts/discourse/templates/user/posts.hbs b/app/assets/javascripts/discourse/templates/user/posts.hbs
index 46c4313e7fc..42220d48997 100644
--- a/app/assets/javascripts/discourse/templates/user/posts.hbs
+++ b/app/assets/javascripts/discourse/templates/user/posts.hbs
@@ -27,5 +27,5 @@
   </div>
 {{/each}}
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/user/stream.hbs b/app/assets/javascripts/discourse/templates/user/stream.hbs
index c3e5da2672f..eda7c8b1454 100644
--- a/app/assets/javascripts/discourse/templates/user/stream.hbs
+++ b/app/assets/javascripts/discourse/templates/user/stream.hbs
@@ -26,5 +26,5 @@
   </div>
 {{/grouped-each}}
 {{#if loading}}
-  <div class='spinner'></div>
+  {{loading-spinner}}
 {{/if}}
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 83313f727fc..0f425c28f23 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -148,26 +148,44 @@ body {
 }
 
 .spinner {
-  width: 20px;
-  margin: 0 auto;
-  padding: 25px 15px;
-  background: {
-    image: image-url("spinner_96.gif");
-    repeat: no-repeat;
-    size: 50px;
-  };
-  -webkit-animation: spinner .25s;
-  animation: spinner .25s;
-  margin-top: 10px;
+  height: 50px; width: 50px;
+  margin: 20px auto 0 auto;
+  -webkit-animation: spin 1s steps(12, end) infinite;
+  animation: spin 1s steps(12, end) infinite;
 }
 
-//loading spinner fade-in
-@-webkit-keyframes spinner {
-    from {opacity: 0}
-    to {opacity: 1}
-}@keyframes fade {
-    from {opacity: 0}
-    to {opacity: 1}
+.spinner i {
+  height: 12px; width: 4px;
+  margin-left: -2px;
+  display: block;
+  position: absolute;
+  left: 50%;
+  transform-origin: center 25px;
+  background: $primary;
+  border-radius: 10px;
+}
+
+.spinner i:nth-child(1) { opacity: 0.08; }
+.spinner i:nth-child(2) { transform: rotate(30deg); opacity: 0.167; }
+.spinner i:nth-child(3) { transform: rotate(60deg); opacity: 0.25; }
+.spinner i:nth-child(4) { transform: rotate(90deg); opacity: 0.33; }
+.spinner i:nth-child(5) { transform: rotate(120deg); opacity: 0.4167; }
+.spinner i:nth-child(6) { transform: rotate(150deg); opacity: 0.5; }
+.spinner i:nth-child(7) { transform: rotate(180deg); opacity: 0.583; }
+.spinner i:nth-child(8) { transform: rotate(210deg); opacity: 0.67; }
+.spinner i:nth-child(9) { transform: rotate(240deg); opacity: 0.75; }
+.spinner i:nth-child(10) { transform: rotate(270deg); opacity: 0.833; }
+.spinner i:nth-child(11) { transform: rotate(300deg); opacity: 0.9167; }
+.spinner i:nth-child(12) { transform: rotate(330deg); opacity: 1; }
+
+@-webkit-keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .avatar-wrapper {