diff --git a/app/assets/javascripts/discourse/templates/notifications.hbs b/app/assets/javascripts/discourse/templates/notifications.hbs
index 22b92515c..056572864 100644
--- a/app/assets/javascripts/discourse/templates/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/notifications.hbs
@@ -13,6 +13,6 @@
       <div class="none">{{i18n notifications.none}}</div>
     {{/if}}
   {{else}}
-    <div class='loading'><i class='fa fa-spinner fa-spin'></i></div>
+    {{loading-spinner}}
   {{/unless}}
 </section>
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index c6422150d..43cb53994 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -222,12 +222,11 @@
     .none {
       padding: 5px;
     }
-    .loading {
-      padding: 10px;
-      display: block;
-      color: scale-color($primary, $lightness: 50%);
-      font-size: 24px;
-      text-align: center;
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      margin: 0 auto;
     }
     /* as a big ol' click target, don't let text inside be selected */
     @include unselectable;