diff --git a/app/components/loading-indicator.coffee b/app/components/loading-indicator.coffee
new file mode 100644
index 00000000..b53ac20a
--- /dev/null
+++ b/app/components/loading-indicator.coffee
@@ -0,0 +1,8 @@
+`import Ember from 'ember'`
+
+LoadingIndicatorComponent = Ember.Component.extend
+  tagName: 'div'
+  classNameBindings: ['center:loading-container']
+  center: false
+
+`export default LoadingIndicatorComponent`
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 818f6f74..828dbaf2 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -11,7 +11,7 @@
 @import "app/charm";
 @import "app/forms";
 @import "app/github";
-@import "app/loading";
+// @import "app/loading";
 @import "app/main/annotations";
 
 @import "app/main/list";
@@ -25,6 +25,7 @@
 
 @import "app/components/travis-switch";
 @import "app/components/sync-button";
+@import "app/components/loading-indicator";
 
 @import "app/modules/section";
 @import "app/modules/loader";
diff --git a/app/styles/app/components/loading-indicator.sass b/app/styles/app/components/loading-indicator.sass
new file mode 100644
index 00000000..165035ba
--- /dev/null
+++ b/app/styles/app/components/loading-indicator.sass
@@ -0,0 +1,33 @@
+.loading-indicator
+  display: inline-block
+  vertical-align: middle
+  i
+    position: relative
+    display: inline-block
+    width: 8px
+    height: 8px
+    background-color: #A6ADAD
+    border-radius: 50%
+    line-height: 0
+    transform-origin: center center
+    animation: bouncedelay 1.3s infinite linear
+    &:nth-child(2)
+      animation-delay: 0.3s
+    &:nth-child(3)
+      animation-delay: 0.6s
+
+@keyframes bouncedelay
+  0%, 80%, 100%
+    transform: scale(0)
+  40%
+    transform: scale(1.0)
+
+.loading-container
+  text-align: center
+  padding: 1.5em 1em
+
+
+.loading-indicator--white
+  @extend .loading-indicator
+  i
+    background-color: $white
\ No newline at end of file
diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass
index 1e43cc0e..b0eddbd9 100644
--- a/app/styles/app/components/sync-button.sass
+++ b/app/styles/app/components/sync-button.sass
@@ -44,35 +44,3 @@
   font-size: 12px
   color: #848384
   text-align: right
-
-.sync-spinner
-  display: inline-block
-  vertical-align: middle
-  i
-    position: relative
-    display: inline-block
-    width: 8px
-    height: 8px
-    background-color: $white
-    border-radius: 50%
-    line-height: 0
-    transform-origin: center center
-    animation: bouncedelay 1.3s infinite linear
-    &:nth-child(2)
-      animation-delay: 0.3s
-    &:nth-child(3)
-      animation-delay: 0.6s
-
-@keyframes bouncedelay
-  0%, 80%, 100%
-    transform: scale(0)
-  40%
-    transform: scale(1.0)
-
-.sync-spinner--grey
-  i
-    background-color: #A6ADAD
-
-.spinner-container
-  text-align: center
-  padding: 1.5em 1em
diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass
index 00e5cfeb..ce186bfd 100644
--- a/app/styles/app/landing.sass
+++ b/app/styles/app/landing.sass
@@ -114,6 +114,10 @@
 
     .sign-in-mascot
       padding-right: 10px
+    .loading-indicator--white
+      height: 1.4em;
+      line-height: 1;
+      margin-right: 0.5em;
 
   .oss-testing
     background-color: #ffffff
diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass
index 5890bec9..d2f94471 100644
--- a/app/styles/app/layouts/profile.sass
+++ b/app/styles/app/layouts/profile.sass
@@ -159,7 +159,7 @@ p.profile-user-last
   white-space: nowrap
   overflow: hidden
   vertical-align: middle
-  span:not(.sync-spinner)
+  span:not(.loading-indicator)
     display: none
     margin-left: 2rem
     font-size: $font-size-sm
diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass
index cef71fc7..b29ca7af 100644
--- a/app/styles/app/modules/switch.sass
+++ b/app/styles/app/modules/switch.sass
@@ -1,6 +1,5 @@
 
-.profile-main
-
+.profile-switch
   $switch-height: 28px
   $switch-inner-height: 22px
   $switch-width: 62px
diff --git a/app/templates/account.hbs b/app/templates/account.hbs
index 45eb1c2e..e77c6caf 100644
--- a/app/templates/account.hbs
+++ b/app/templates/account.hbs
@@ -28,7 +28,7 @@
     {{#if user.isSyncing}}
       <div class="sync-button">
         <button class="button is-syncing">
-          <span class="sync-spinner"><i></i><i></i><i></i></span>Syncing from GitHub
+          <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
         </button>
       </div>
     {{else}}
@@ -94,7 +94,7 @@
       <ul class="profile-hooklist">
         {{#each hook in hooksWithoutAdmin}}
           <li {{bind-attr class="hook.active:active :row"}}>
-            <button class="switch disabled"></button>
+            <button class="profile-switch disabled"></button>
             <a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo">
               {{hook.slug}}
               <span>{{hook.description}}</span>
@@ -106,7 +106,7 @@
   {{/if}}
 
 {{else}}
-  <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  {{loading-indicator}}
 {{/if}}
 
 
diff --git a/app/templates/accounts-list/empty.hbs b/app/templates/accounts-list/empty.hbs
index 295518d7..18503769 100644
--- a/app/templates/accounts-list/empty.hbs
+++ b/app/templates/accounts-list/empty.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
\ No newline at end of file
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/build.hbs b/app/templates/build.hbs
index 37b150aa..398a5e2b 100644
--- a/app/templates/build.hbs
+++ b/app/templates/build.hbs
@@ -1,5 +1,5 @@
 {{#if loading}}
-  <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  {{loading-indicator}}
 {{else}}
   <section {{bind-attr class=":tile :tile--pass :row build.state"}}>
     <div class="tile-status">
@@ -81,9 +81,7 @@
       {{jobs-list jobs=build.requiredJobs repo=repo required="true"}}
       {{jobs-list jobs=build.allowedFailureJobs repo=repo}}
     {{else}}
-      <div class="spinner-container">
-        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
-      </div>
+      {{loading-indicator center=true}}
     {{/if}}
   {{else}}
     {{view 'log' job=build.jobs.firstObject}}
diff --git a/app/templates/builds.hbs b/app/templates/builds.hbs
index 29b8c159..ed386250 100644
--- a/app/templates/builds.hbs
+++ b/app/templates/builds.hbs
@@ -56,10 +56,10 @@
     <p>
       {{view 'show-more-button'}}
       {{#if isLoading}}
-        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+        {{loading-indicator}}
       {{/if}}
     </p>
   {{/if}}
 {{else}}
-  <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  {{loading-indicator}}
 {{/if}}
diff --git a/app/templates/components/build-repo-actions.hbs b/app/templates/components/build-repo-actions.hbs
index 163eee0f..b38ea9ca 100644
--- a/app/templates/components/build-repo-actions.hbs
+++ b/app/templates/components/build-repo-actions.hbs
@@ -1,6 +1,6 @@
 {{#if canCancel}}
   {{#if cancelling}}
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+    {{loading-indicator}}
   {{else}}
     <a href="#" {{action "cancel"}} class="button-circle"
        title="Cancel Build">
@@ -11,7 +11,7 @@
 
 {{#if canRestart}}
   {{#if restarting}}
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+    {{loading-indicator}}
   {{else}}
     <a href="#" {{action "restart"}} class="button-circle" title="Restart Build">
       <span class="icon icon--trigger"></span>
diff --git a/app/templates/components/hooks-list-item.hbs b/app/templates/components/hooks-list-item.hbs
index 46d6bd4c..55f94915 100644
--- a/app/templates/components/hooks-list-item.hbs
+++ b/app/templates/components/hooks-list-item.hbs
@@ -1,7 +1,7 @@
-<div class="profile-hooks columns">
+<div class="profile-hooks profile-switch columns">
   {{hook-switch hook=hook onToggleError="handleToggleError" onToggle="resetErrors"}}
   {{#if hook.isSaving}}
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+    {{loading-indicator}}
   {{else}}
     {{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
   {{/if}}
diff --git a/app/templates/components/job-repo-actions.hbs b/app/templates/components/job-repo-actions.hbs
index 68db5cff..05e423d1 100644
--- a/app/templates/components/job-repo-actions.hbs
+++ b/app/templates/components/job-repo-actions.hbs
@@ -1,6 +1,6 @@
 {{#if canCancel}}
   {{#if cancelling}}
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+    {{loading-indicator}}
   {{else}}
     <a href="#" {{action "cancel"}} class="button-circle" title="Cancel Job">
       <span class="icon icon--cancel"></span>
@@ -10,7 +10,7 @@
 
 {{#if canRestart}}
   {{#if restarting}}
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+    {{loading-indicator}}
   {{else}}
     <a href="#" {{action "restart"}} class="button-circle" title="Restart Job">
       <span class="icon icon--trigger"></span>
diff --git a/app/templates/components/loading-indicator.hbs b/app/templates/components/loading-indicator.hbs
new file mode 100644
index 00000000..170cb32a
--- /dev/null
+++ b/app/templates/components/loading-indicator.hbs
@@ -0,0 +1 @@
+<span class="loading-indicator"><i></i><i></i><i></i></span>
diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs
index 15c19aa4..a01e4c71 100644
--- a/app/templates/components/orgs-filter.hbs
+++ b/app/templates/components/orgs-filter.hbs
@@ -1,7 +1,7 @@
 <div class="filter filter--org">
   <div class="filter-current">
     {{#if orgs.isLoading}}
-      <span class="loading"></span>
+      {{loading-indicator}}
     {{else}}
       <a href="" title="">
         {{#if selected }}
diff --git a/app/templates/components/owner-sync-button.hbs b/app/templates/components/owner-sync-button.hbs
index b68b8302..2c671573 100644
--- a/app/templates/components/owner-sync-button.hbs
+++ b/app/templates/components/owner-sync-button.hbs
@@ -2,7 +2,7 @@
   {{#if owner.isSyncing }}
     <p>
       <button class="button" disabled="disabled">
-        <span class="sync-spinner"><i></i><i></i><i></i></span>Syncing
+        <span class="lading-indicator--white"><i></i><i></i><i></i></span>Syncing
       </button>
     </p>
   {{else}}
diff --git a/app/templates/components/sync-button.hbs b/app/templates/components/sync-button.hbs
index 3ef795d3..c0081ce1 100644
--- a/app/templates/components/sync-button.hbs
+++ b/app/templates/components/sync-button.hbs
@@ -1,7 +1,7 @@
 <div class="sync-button">
   {{#if user.isSyncing }}
     <button class="button is-syncing">
-      <span class="sync-spinner"><i></i><i></i><i></i></span>Syncing from GitHub
+      <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
     </button>
   {{else}}
     <p class="sync-last">last synced {{format-time user.syncedAt}}</p>
diff --git a/app/templates/dashboard/loading.hbs b/app/templates/dashboard/loading.hbs
index 7a59046c..8536a5d2 100644
--- a/app/templates/dashboard/loading.hbs
+++ b/app/templates/dashboard/loading.hbs
@@ -1,12 +1 @@
-<div class="row">
-  <div class="small-centered columns" id="loader-container-large">
-    <div class="loader-large">
-      <div class="load-circle1"></div>
-      <div class="load-circle2"></div>
-    </div>
-    {{!-- <div class="load-text">
-      <p>Hold tight.<br>
-      We're consulting the internet.</p>
-    </div> --}}
-  </div>
-</div>
+{{loading-indicator center=true}}
diff --git a/app/templates/events/list.hbs b/app/templates/events/list.hbs
index 4865ec7d..56fc64bd 100644
--- a/app/templates/events/list.hbs
+++ b/app/templates/events/list.hbs
@@ -29,6 +29,6 @@
     </tbody>
   </table>
 {{else}}
-  <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  {{loading-indicator}}
 {{/if}}
 
diff --git a/app/templates/home.hbs b/app/templates/home.hbs
index fee45abf..f7157982 100644
--- a/app/templates/home.hbs
+++ b/app/templates/home.hbs
@@ -9,7 +9,7 @@
 				  <button {{action "signIn" target="auth"}} class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</button>
 				{{/if}}
 				{{#if auth.signingIn}}
-					<button class="button"><span class="sync-spinner"><i></i><i></i><i></i></span>Signing In</button>
+					<button class="button"><span class="loading-indicator--white"><i></i><i></i><i></i></span>Signing In</button>
 				{{/if}}
 
 			</div>
@@ -81,7 +81,7 @@
 						</div>
 					</li>
 				{{else}}
-				<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+					{{loading-indicator}}
 				{{/each}}
 				</ul>
 			</div>
diff --git a/app/templates/job.hbs b/app/templates/job.hbs
index 31e2d6b6..81b394e8 100644
--- a/app/templates/job.hbs
+++ b/app/templates/job.hbs
@@ -67,6 +67,6 @@
 
 {{else}}
   <div id="job">
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+    {{loading-indicator}}
   </div>
 {{/if}}
diff --git a/app/templates/jobs.hbs b/app/templates/jobs.hbs
index d443ef2f..166d3252 100644
--- a/app/templates/jobs.hbs
+++ b/app/templates/jobs.hbs
@@ -75,7 +75,7 @@
 
             {{/link-to}}
           {{else}}
-            <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+            {{loading-indicator}}
           {{/if}}
         </div>
       {{/view}}
diff --git a/app/templates/jobs/log.hbs b/app/templates/jobs/log.hbs
index db076dea..4ae18401 100644
--- a/app/templates/jobs/log.hbs
+++ b/app/templates/jobs/log.hbs
@@ -1,5 +1,5 @@
 {{#if view.log.isLoaded}}
   {{view 'pre' job=view.job log=view.log}}
 {{else}}
-  <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  {{loading-indicator}}
 {{/if}}
diff --git a/app/templates/loading.hbs b/app/templates/loading.hbs
index 1034d960..18503769 100644
--- a/app/templates/loading.hbs
+++ b/app/templates/loading.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/main/loading.hbs b/app/templates/main/loading.hbs
index 295518d7..18503769 100644
--- a/app/templates/main/loading.hbs
+++ b/app/templates/main/loading.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
\ No newline at end of file
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/profile/loading.hbs b/app/templates/profile/loading.hbs
index 295518d7..18503769 100644
--- a/app/templates/profile/loading.hbs
+++ b/app/templates/profile/loading.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
\ No newline at end of file
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/queue.hbs b/app/templates/queue.hbs
index e780f625..ea147397 100644
--- a/app/templates/queue.hbs
+++ b/app/templates/queue.hbs
@@ -22,10 +22,8 @@
 
     {{/each}}
   {{else}}
-    <div class="spinner-container">There are no jobs queued</div>
+    <div class="loading-container">There are no jobs queued</div>
   {{/if}}
 {{else}}
-  <div class="spinner-container">
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
-  </div>
+  {{loading-indicator center=true}}
 {{/if}}
diff --git a/app/templates/repo.hbs b/app/templates/repo.hbs
index f2f7de4b..baa24ed0 100644
--- a/app/templates/repo.hbs
+++ b/app/templates/repo.hbs
@@ -29,7 +29,7 @@
       </article>
 
     {{else}}
-      <span class="sync-spinner"><i></i><i></i><i></i></span>
+      {{loading-indicator}}
     {{/if}}
 
   {{/if}}
diff --git a/app/templates/repo/loading.hbs b/app/templates/repo/loading.hbs
index 1034d960..18503769 100644
--- a/app/templates/repo/loading.hbs
+++ b/app/templates/repo/loading.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/repos-list/empty.hbs b/app/templates/repos-list/empty.hbs
index 295518d7..18503769 100644
--- a/app/templates/repos-list/empty.hbs
+++ b/app/templates/repos-list/empty.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
\ No newline at end of file
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/repos.hbs b/app/templates/repos.hbs
index 95fafe87..f69e9684 100644
--- a/app/templates/repos.hbs
+++ b/app/templates/repos.hbs
@@ -64,9 +64,7 @@
       {{/collection}}
 
     {{else}}
-      <div class="spinner-container">
-        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
-      </div>
+      {{loading-indicator center=true}}
     {{/if}}
   </div>
 {{/if}}
diff --git a/app/templates/running-jobs.hbs b/app/templates/running-jobs.hbs
index bb97dcfd..f4bf43f7 100644
--- a/app/templates/running-jobs.hbs
+++ b/app/templates/running-jobs.hbs
@@ -25,10 +25,8 @@
       </div>
     {{/each}}
   {{else}}
-    <div class="spinner-container">There are no jobs running</div>
+    <div class="loading-container">There are no jobs running</div>
   {{/if}}
 {{else}}
-  <div class="spinner-container">
-    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
-  </div>
+  {{loading-indicator center="true"}}
 {{/if}}
diff --git a/app/templates/settings/loading.hbs b/app/templates/settings/loading.hbs
index 295518d7..18503769 100644
--- a/app/templates/settings/loading.hbs
+++ b/app/templates/settings/loading.hbs
@@ -1 +1 @@
-<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
\ No newline at end of file
+{{loading-indicator}}
\ No newline at end of file
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index 748fcbd1..5b62d817 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -50,7 +50,7 @@
           {{#link-to "profile" class="signed-in"}}{{userName}}<img {{bind-attr src="gravatarUrl"}}/>{{/link-to}}
         {{/if}}
         {{#if auth.signingIn}}
-          <button class="signing-in button--signingin">Signing In <span class="sync-spinner"><i></i><i></i><i></i></span></button>
+          <button class="signing-in button--signingin">Signing In <span class="loading-indicator--white"><i></i><i></i><i></i></span></button>
         {{/if}}
       </p>
       {{#if auth.signedIn}}
diff --git a/tests/unit/components/loading-indicator-test.coffee b/tests/unit/components/loading-indicator-test.coffee
new file mode 100644
index 00000000..636946c0
--- /dev/null
+++ b/tests/unit/components/loading-indicator-test.coffee
@@ -0,0 +1,15 @@
+`import { test, moduleForComponent } from 'ember-qunit'`
+
+moduleForComponent 'loading-indicator', {
+  # specify the other units that are required for this test
+  # needs: ['component:foo', 'helper:bar']
+}
+
+test 'it renders', (assert) ->
+
+  component = @subject(center: true)
+
+  @append()
+
+  ok component.$('span').hasClass('loading-indicator'), 'component has loading indicator class'
+  ok component.$().hasClass('loading-container'), 'indicator gets parent class if centered flag is given'