diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78485fccf9c..c100912ec32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 ## UI Improvements
 1. [11683](https://github.com/influxdata/influxdb/pull/11683): Change the wording for the plugin config form button to Done
 1. [11689](https://github.com/influxdata/influxdb/pull/11689): Change the wording for the Collectors configure step button to Create and Verify
+1. [11697](https://github.com/influxdata/influxdb/pull/11697): Standardize page loading spinner styles
 
 ## v2.0.0-alpha.1 [2019-01-23]
 
diff --git a/ui/src/Setup.tsx b/ui/src/Setup.tsx
index f1239b5445f..f76e10ba9ec 100644
--- a/ui/src/Setup.tsx
+++ b/ui/src/Setup.tsx
@@ -11,6 +11,7 @@ import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // Utils
 import {isOnboardingURL} from 'src/onboarding/utils'
@@ -63,18 +64,12 @@ export class Setup extends PureComponent<Props, State> {
   }
 
   public render() {
-    if (this.isLoading) {
-      return <div className="page-spinner" />
-    } else {
-      return this.props.children && React.cloneElement(this.props.children)
-    }
-  }
-
-  private get isLoading(): boolean {
     const {loading} = this.state
+
     return (
-      loading === RemoteDataState.Loading ||
-      loading === RemoteDataState.NotStarted
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
     )
   }
 }
diff --git a/ui/src/Signin.tsx b/ui/src/Signin.tsx
index a901e6e5c81..25b641d0793 100644
--- a/ui/src/Signin.tsx
+++ b/ui/src/Signin.tsx
@@ -7,6 +7,7 @@ import {client} from 'src/utils/api'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -55,18 +56,12 @@ export class Signin extends PureComponent<Props, State> {
   }
 
   public render() {
-    if (this.isLoading) {
-      return <div className="page-spinner" />
-    }
-
-    return this.props.children && React.cloneElement(this.props.children)
-  }
-
-  private get isLoading(): boolean {
     const {loading} = this.state
+
     return (
-      loading === RemoteDataState.Loading ||
-      loading === RemoteDataState.NotStarted
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
     )
   }
 
diff --git a/ui/src/clockface/components/spinners/Spinner.tsx b/ui/src/clockface/components/spinners/Spinner.tsx
deleted file mode 100644
index 93f33ce45d5..00000000000
--- a/ui/src/clockface/components/spinners/Spinner.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Libraries
-import React, {Component} from 'react'
-
-// Types
-import {RemoteDataState} from 'src/types'
-
-// Decorators
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-interface Props {
-  loading: RemoteDataState
-  children: JSX.Element[] | JSX.Element
-}
-
-@ErrorHandling
-export default class Spinner extends Component<Props> {
-  public render() {
-    return this.children
-  }
-
-  private get children(): JSX.Element | JSX.Element[] {
-    const {loading, children} = this.props
-
-    if (
-      loading === RemoteDataState.Loading ||
-      loading === RemoteDataState.NotStarted
-    ) {
-      return (
-        <div className="spinner-container">
-          <div className="spinner" />
-        </div>
-      )
-    }
-
-    return children
-  }
-}
diff --git a/ui/src/clockface/components/spinners/SpinnerContainer.scss b/ui/src/clockface/components/spinners/SpinnerContainer.scss
new file mode 100644
index 00000000000..1a300a03ce7
--- /dev/null
+++ b/ui/src/clockface/components/spinners/SpinnerContainer.scss
@@ -0,0 +1,9 @@
+.spinner-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+}
diff --git a/ui/src/clockface/components/spinners/SpinnerContainer.tsx b/ui/src/clockface/components/spinners/SpinnerContainer.tsx
new file mode 100644
index 00000000000..c90d8f2f552
--- /dev/null
+++ b/ui/src/clockface/components/spinners/SpinnerContainer.tsx
@@ -0,0 +1,43 @@
+// Libraries
+import React, {Component} from 'react'
+import classnames from 'classnames'
+
+// Types
+import {RemoteDataState} from 'src/types'
+
+// Styles
+import 'src/clockface/components/spinners/SpinnerContainer.scss'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  children: JSX.Element[] | JSX.Element
+  className?: string
+  loading: RemoteDataState
+  spinnerComponent: JSX.Element
+}
+
+@ErrorHandling
+class SpinnerContainer extends Component<Props> {
+  public render() {
+    const {loading, children, spinnerComponent} = this.props
+
+    if (
+      loading === RemoteDataState.Loading ||
+      loading === RemoteDataState.NotStarted
+    ) {
+      return <div className={this.className}>{spinnerComponent}</div>
+    }
+
+    return children
+  }
+
+  private get className(): string {
+    const {className} = this.props
+
+    return classnames('spinner-container', {[`${className}`]: className})
+  }
+}
+
+export default SpinnerContainer
diff --git a/ui/src/clockface/components/spinners/TechnoSpinner.scss b/ui/src/clockface/components/spinners/TechnoSpinner.scss
new file mode 100644
index 00000000000..4308558d0ba
--- /dev/null
+++ b/ui/src/clockface/components/spinners/TechnoSpinner.scss
@@ -0,0 +1,29 @@
+@import 'src/style/modules';
+
+.techno-spinner {
+  border-style: solid;
+  border-color: rgba($g5-pepper, 0.4);
+  border-left-color: $c-pool;
+  border-radius: 50%;
+  animation: technoSpinnerAnimation 0.8s infinite linear;
+}
+
+@keyframes technoSpinnerAnimation {
+  0% {
+    transform: rotate(0deg);
+    border-left-color: $c-pool;
+  }
+  25% {
+    border-left-color: $c-comet;
+  }
+  50% {
+    border-left-color: $c-pool;
+  }
+  75% {
+    border-left-color: $c-rainforest;
+  }
+  100% {
+    transform: rotate(360deg);
+    border-left-color: $c-pool;
+  }
+}
diff --git a/ui/src/clockface/components/spinners/TechnoSpinner.tsx b/ui/src/clockface/components/spinners/TechnoSpinner.tsx
new file mode 100644
index 00000000000..f1a05519858
--- /dev/null
+++ b/ui/src/clockface/components/spinners/TechnoSpinner.tsx
@@ -0,0 +1,59 @@
+// Libraries
+import React, {Component, CSSProperties} from 'react'
+
+// Types
+import {ComponentSize} from 'src/clockface/types'
+
+// Styles
+import 'src/clockface/components/spinners/TechnoSpinner.scss'
+
+interface Props {
+  diameterPixels?: number
+  strokeWidth?: ComponentSize
+}
+
+class TechnoSpinner extends Component<Props> {
+  public static defaultProps: Props = {
+    diameterPixels: 100,
+    strokeWidth: ComponentSize.Small,
+  }
+
+  public render() {
+    return <div className="techno-spinner" style={this.style} />
+  }
+
+  private get style(): CSSProperties {
+    const {diameterPixels} = this.props
+
+    const borderWidth = `${this.strokeWidth}px`
+    const width = `${diameterPixels}px`
+    const height = `${diameterPixels}px`
+
+    return {width, height, borderWidth}
+  }
+
+  private get strokeWidth(): number {
+    const {strokeWidth} = this.props
+
+    let width
+
+    switch (strokeWidth) {
+      case ComponentSize.ExtraSmall:
+        width = 1
+        break
+      case ComponentSize.Small:
+        width = 2
+        break
+      case ComponentSize.Medium:
+        width = 4
+        break
+      case ComponentSize.Large:
+      default:
+        width = 8
+    }
+
+    return width
+  }
+}
+
+export default TechnoSpinner
diff --git a/ui/src/clockface/index.ts b/ui/src/clockface/index.ts
index 96bfb9000cb..6b2499d2aff 100644
--- a/ui/src/clockface/index.ts
+++ b/ui/src/clockface/index.ts
@@ -23,7 +23,6 @@ import WizardProgressHeader from './components/wizard/WizardProgressHeader'
 import ProgressBar from './components/wizard/ProgressBar'
 import ComponentSpacer from './components/component_spacer/ComponentSpacer'
 import EmptyState from './components/empty_state/EmptyState'
-import Spinner from './components/spinners/Spinner'
 import SparkleSpinner from './components/spinners/SparkleSpinner'
 import IndexList from './components/index_views/IndexList'
 import Context from './components/context_menu/Context'
@@ -35,6 +34,8 @@ import GridSizer from 'src/clockface/components/grid_sizer/GridSizer'
 import Select from 'src/clockface/components/Select'
 import Grid from 'src/clockface/components/grid_layout/Grid'
 import QuestionMarkTooltip from 'src/clockface/components/tooltips/QuestionMarkTooltip'
+import SpinnerContainer from 'src/clockface/components/spinners/SpinnerContainer'
+import TechnoSpinner from 'src/clockface/components/spinners/TechnoSpinner'
 
 // Import Types
 import {
@@ -102,8 +103,9 @@ export {
   SlideToggle,
   SparkleSpinner,
   Sort,
-  Spinner,
+  SpinnerContainer,
   Stack,
+  TechnoSpinner,
   WizardFullScreen,
   WizardProgressHeader,
   WizardOverlay,
diff --git a/ui/src/configuration/components/ConfigurationPage.tsx b/ui/src/configuration/components/ConfigurationPage.tsx
index 8d6f8fd5b43..da69f8ab08f 100644
--- a/ui/src/configuration/components/ConfigurationPage.tsx
+++ b/ui/src/configuration/components/ConfigurationPage.tsx
@@ -5,7 +5,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 // Components
 import {Page} from 'src/pageLayout'
 import GetLabels from 'src/configuration/components/GetLabels'
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import Labels from 'src/configuration/components/Labels'
@@ -50,9 +50,12 @@ class ConfigurationPage extends Component<Props> {
               >
                 <GetLabels>
                   {(labels, loading) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <Labels labels={labels} />
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetLabels>
               </TabbedPageSection>
diff --git a/ui/src/dataLoaders/components/verifyStep/CreateOrUpdateConfig.tsx b/ui/src/dataLoaders/components/verifyStep/CreateOrUpdateConfig.tsx
index 0065f7abbb8..75d952828ba 100644
--- a/ui/src/dataLoaders/components/verifyStep/CreateOrUpdateConfig.tsx
+++ b/ui/src/dataLoaders/components/verifyStep/CreateOrUpdateConfig.tsx
@@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Actions
@@ -69,7 +69,12 @@ export class CreateOrUpdateConfig extends PureComponent<Props, State> {
 
   public render() {
     return (
-      <Spinner loading={this.state.loading}>{this.props.children()}</Spinner>
+      <SpinnerContainer
+        loading={this.state.loading}
+        spinnerComponent={<TechnoSpinner />}
+      >
+        {this.props.children()}
+      </SpinnerContainer>
     )
   }
 }
diff --git a/ui/src/dataLoaders/components/verifyStep/FetchAuthToken.tsx b/ui/src/dataLoaders/components/verifyStep/FetchAuthToken.tsx
index b93e7fa0ab0..ceaaf5335cd 100644
--- a/ui/src/dataLoaders/components/verifyStep/FetchAuthToken.tsx
+++ b/ui/src/dataLoaders/components/verifyStep/FetchAuthToken.tsx
@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
 import _ from 'lodash'
 
 // Components
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Apis
@@ -44,9 +44,12 @@ class FetchAuthToken extends PureComponent<Props, State> {
 
   public render() {
     return (
-      <Spinner loading={this.state.loading}>
+      <SpinnerContainer
+        loading={this.state.loading}
+        spinnerComponent={<TechnoSpinner />}
+      >
         {this.props.children(this.state.authToken)}
-      </Spinner>
+      </SpinnerContainer>
     )
   }
 }
diff --git a/ui/src/me/components/Resources.tsx b/ui/src/me/components/Resources.tsx
index 8cdafa8f33d..b94f4ac17f2 100644
--- a/ui/src/me/components/Resources.tsx
+++ b/ui/src/me/components/Resources.tsx
@@ -8,7 +8,7 @@ import LogoutButton from 'src/me/components/LogoutButton'
 import OrgsList from 'src/me/components/OrgsList'
 import DashboardsList from 'src/me/components/DashboardsList'
 import ResourceFetcher from 'src/shared/components/resource_fetcher'
-import {Panel, Spinner} from 'src/clockface'
+import {Panel, SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // Constants
 import {VERSION, GIT_SHA} from 'src/shared/constants'
@@ -51,9 +51,12 @@ class ResourceLists extends PureComponent<Props> {
           <Panel.Body>
             <ResourceFetcher<Organization[]> fetcher={getOrganizations}>
               {(orgs, loading) => (
-                <Spinner loading={loading}>
+                <SpinnerContainer
+                  loading={loading}
+                  spinnerComponent={<TechnoSpinner diameterPixels={50} />}
+                >
                   <OrgsList orgs={orgs} />
-                </Spinner>
+                </SpinnerContainer>
               )}
             </ResourceFetcher>
           </Panel.Body>
@@ -63,9 +66,12 @@ class ResourceLists extends PureComponent<Props> {
           <Panel.Body>
             <ResourceFetcher<Dashboard[]> fetcher={getDashboards}>
               {(dashboards, loading) => (
-                <Spinner loading={loading}>
+                <SpinnerContainer
+                  loading={loading}
+                  spinnerComponent={<TechnoSpinner diameterPixels={50} />}
+                >
                   <DashboardsList dashboards={dashboards} />
-                </Spinner>
+                </SpinnerContainer>
               )}
             </ResourceFetcher>
           </Panel.Body>
diff --git a/ui/src/me/components/account/Tokens.tsx b/ui/src/me/components/account/Tokens.tsx
index 515c2d91619..566856508cc 100644
--- a/ui/src/me/components/account/Tokens.tsx
+++ b/ui/src/me/components/account/Tokens.tsx
@@ -3,7 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
-import {IconFont, Input, Spinner} from 'src/clockface'
+import {IconFont, Input, SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import ResourceFetcher from 'src/shared/components/resource_fetcher'
 import TokenList from 'src/me/components/account/TokensList'
 import FilterList from 'src/shared/components/Filter'
@@ -59,7 +59,10 @@ export class Tokens extends PureComponent<Props, State> {
         </TabbedPageHeader>
         <ResourceFetcher<Authorization[]> fetcher={getAuthorizations}>
           {(fetchedAuths, loading) => (
-            <Spinner loading={loading}>
+            <SpinnerContainer
+              loading={loading}
+              spinnerComponent={<TechnoSpinner />}
+            >
               <FilterList<Authorization>
                 list={fetchedAuths}
                 searchTerm={searchTerm}
@@ -73,7 +76,7 @@ export class Tokens extends PureComponent<Props, State> {
                   />
                 )}
               </FilterList>
-            </Spinner>
+            </SpinnerContainer>
           )}
         </ResourceFetcher>
       </>
diff --git a/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap b/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap
index fcacea3e545..22f341def6c 100644
--- a/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap
+++ b/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap
@@ -56,8 +56,14 @@ exports[`Account rendering renders! 1`] = `
   <ResourceFetcher
     fetcher={[Function]}
   >
-    <Spinner
+    <SpinnerContainer
       loading="Done"
+      spinnerComponent={
+        <TechnoSpinner
+          diameterPixels={100}
+          strokeWidth="sm"
+        />
+      }
     >
       <FilterList
         list={
@@ -499,7 +505,7 @@ exports[`Account rendering renders! 1`] = `
           </OverlayTechnology>
         </TokenList>
       </FilterList>
-    </Spinner>
+    </SpinnerContainer>
   </ResourceFetcher>
 </Tokens>
 `;
diff --git a/ui/src/onboarding/containers/OnboardingWizardPage.tsx b/ui/src/onboarding/containers/OnboardingWizardPage.tsx
index a1f2b72cd76..e75eff26567 100644
--- a/ui/src/onboarding/containers/OnboardingWizardPage.tsx
+++ b/ui/src/onboarding/containers/OnboardingWizardPage.tsx
@@ -14,7 +14,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import OnboardingWizard from 'src/onboarding/containers/OnboardingWizard'
 import Notifications from 'src/shared/components/notifications/Notifications'
 import {
-  Spinner,
+  SpinnerContainer,
+  TechnoSpinner,
   ComponentColor,
   ComponentSize,
   WizardFullScreen,
@@ -82,7 +83,10 @@ export class OnboardingWizardPage extends PureComponent<Props, State> {
 
     if (isSetupComplete) {
       return (
-        <Spinner loading={this.state.loading}>
+        <SpinnerContainer
+          loading={this.state.loading}
+          spinnerComponent={<TechnoSpinner />}
+        >
           <WizardFullScreen>
             <div className="wizard-contents">
               <div className="wizard-step--container">
@@ -100,12 +104,15 @@ export class OnboardingWizardPage extends PureComponent<Props, State> {
               </div>
             </div>
           </WizardFullScreen>
-        </Spinner>
+        </SpinnerContainer>
       )
     }
 
     return (
-      <Spinner loading={this.state.loading}>
+      <SpinnerContainer
+        loading={this.state.loading}
+        spinnerComponent={<TechnoSpinner />}
+      >
         <div className="chronograf-root">
           <Notifications inPresentationMode={true} />
           <OnboardingWizard
@@ -117,7 +124,7 @@ export class OnboardingWizardPage extends PureComponent<Props, State> {
             onCompleteSetup={this.handleCompleteSetup}
           />
         </div>
-      </Spinner>
+      </SpinnerContainer>
     )
   }
 
diff --git a/ui/src/onboarding/containers/SigninPage.tsx b/ui/src/onboarding/containers/SigninPage.tsx
index a6d25178a2d..4a0e5dc9e78 100644
--- a/ui/src/onboarding/containers/SigninPage.tsx
+++ b/ui/src/onboarding/containers/SigninPage.tsx
@@ -10,7 +10,7 @@ import {client} from 'src/utils/api'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import SplashPage from 'src/shared/components/splash_page/SplashPage'
 import SigninForm from 'src/onboarding/components/SigninForm'
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import {RemoteDataState} from 'src/types'
 import Notifications from 'src/shared/components/notifications/Notifications'
 
@@ -39,7 +39,10 @@ class SigninPage extends PureComponent<WithRouterProps, State> {
 
   public render() {
     return (
-      <Spinner loading={this.state.status}>
+      <SpinnerContainer
+        loading={this.state.status}
+        spinnerComponent={<TechnoSpinner />}
+      >
         <Notifications inPresentationMode={true} />
         <SplashPage panelWidthPixels={300}>
           <SplashPage.Panel>
@@ -48,7 +51,7 @@ class SigninPage extends PureComponent<WithRouterProps, State> {
             <SigninForm />
           </SplashPage.Panel>
         </SplashPage>
-      </Spinner>
+      </SpinnerContainer>
     )
   }
 }
diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx
index af8123af754..e248fbb3a61 100644
--- a/ui/src/organizations/containers/OrganizationView.tsx
+++ b/ui/src/organizations/containers/OrganizationView.tsx
@@ -30,7 +30,7 @@ import * as notifyActions from 'src/shared/actions/notifications'
 
 // Components
 import {Page} from 'src/pageLayout'
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import Members from 'src/organizations/components/Members'
@@ -103,9 +103,12 @@ class OrganizationView extends PureComponent<Props> {
                   fetcher={this.getOwnersAndMembers}
                 >
                   {(members, loading) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <Members members={members} orgName={org.name} />
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetOrgResources>
               </TabbedPageSection>
@@ -119,14 +122,17 @@ class OrganizationView extends PureComponent<Props> {
                   fetcher={getBuckets}
                 >
                   {(buckets, loading, fetch) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <Buckets
                         buckets={buckets}
                         org={org}
                         onChange={fetch}
                         notify={notify}
                       />
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetOrgResources>
               </TabbedPageSection>
@@ -140,14 +146,17 @@ class OrganizationView extends PureComponent<Props> {
                   fetcher={getDashboards}
                 >
                   {(dashboards, loading, fetch) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <Dashboards
                         dashboards={dashboards}
                         orgName={org.name}
                         onChange={fetch}
                         orgID={org.id}
                       />
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetOrgResources>
               </TabbedPageSection>
@@ -158,13 +167,16 @@ class OrganizationView extends PureComponent<Props> {
               >
                 <GetOrgResources<Task[]> organization={org} fetcher={getTasks}>
                   {(tasks, loading, fetch) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <Tasks
                         tasks={tasks}
                         orgName={org.name}
                         onChange={fetch}
                       />
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetOrgResources>
               </TabbedPageSection>
@@ -178,13 +190,19 @@ class OrganizationView extends PureComponent<Props> {
                   fetcher={getCollectors}
                 >
                   {(collectors, loading, fetch) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <GetOrgResources<Bucket[]>
                         organization={org}
                         fetcher={getBuckets}
                       >
                         {(buckets, loading) => (
-                          <Spinner loading={loading}>
+                          <SpinnerContainer
+                            loading={loading}
+                            spinnerComponent={<TechnoSpinner />}
+                          >
                             <Collectors
                               collectors={collectors}
                               onChange={fetch}
@@ -192,10 +210,10 @@ class OrganizationView extends PureComponent<Props> {
                               buckets={buckets}
                               orgName={org.name}
                             />
-                          </Spinner>
+                          </SpinnerContainer>
                         )}
                       </GetOrgResources>
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetOrgResources>
               </TabbedPageSection>
@@ -210,23 +228,29 @@ class OrganizationView extends PureComponent<Props> {
                 >
                   {(scrapers, loading, fetch) => {
                     return (
-                      <Spinner loading={loading}>
+                      <SpinnerContainer
+                        loading={loading}
+                        spinnerComponent={<TechnoSpinner />}
+                      >
                         <GetOrgResources<Bucket[]>
                           organization={org}
                           fetcher={getBuckets}
                         >
                           {(buckets, loading) => (
-                            <Spinner loading={loading}>
+                            <SpinnerContainer
+                              loading={loading}
+                              spinnerComponent={<TechnoSpinner />}
+                            >
                               <Scrapers
                                 scrapers={scrapers}
                                 onChange={fetch}
                                 orgName={org.name}
                                 buckets={buckets}
                               />
-                            </Spinner>
+                            </SpinnerContainer>
                           )}
                         </GetOrgResources>
-                      </Spinner>
+                      </SpinnerContainer>
                     )
                   }}
                 </GetOrgResources>
diff --git a/ui/src/shared/components/FetchLabels.tsx b/ui/src/shared/components/FetchLabels.tsx
index 56711ff1d5a..ff14503bbc0 100644
--- a/ui/src/shared/components/FetchLabels.tsx
+++ b/ui/src/shared/components/FetchLabels.tsx
@@ -2,7 +2,7 @@
 import React, {PureComponent} from 'react'
 
 // Components
-import {EmptyState} from 'src/clockface'
+import {EmptyState, SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // APIs
 import {client} from 'src/utils/api'
@@ -20,7 +20,7 @@ interface Props {
 
 interface State {
   labels: Label[]
-  ready: RemoteDataState
+  loading: RemoteDataState
 }
 
 @ErrorHandling
@@ -30,17 +30,19 @@ class FetchLabels extends PureComponent<Props, State> {
 
     this.state = {
       labels: [],
-      ready: RemoteDataState.NotStarted,
+      loading: RemoteDataState.NotStarted,
     }
   }
 
   public async componentDidMount() {
     const labels = await client.labels.getAll()
-    this.setState({ready: RemoteDataState.Done, labels})
+    this.setState({loading: RemoteDataState.Done, labels})
   }
 
   public render() {
-    if (this.state.ready === RemoteDataState.Error) {
+    const {loading} = this.state
+
+    if (loading === RemoteDataState.Error) {
       return (
         <EmptyState>
           <EmptyState.Text text="Could not load labels" />
@@ -48,11 +50,11 @@ class FetchLabels extends PureComponent<Props, State> {
       )
     }
 
-    if (this.state.ready !== RemoteDataState.Done) {
-      return <div className="page-spinner" />
-    }
-
-    return this.props.children(this.state.labels)
+    return (
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children(this.state.labels)}
+      </SpinnerContainer>
+    )
   }
 }
 
diff --git a/ui/src/shared/components/page_spinner/PageSpinner.scss b/ui/src/shared/components/page_spinner/PageSpinner.scss
deleted file mode 100644
index 835e11f91c7..00000000000
--- a/ui/src/shared/components/page_spinner/PageSpinner.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.page-spinner {
-  border: 4px solid rgba(51, 51, 51, 0.4);
-  border-left-color: $c-pool;
-  border-radius: 50%;
-  width: 100px;
-  height: 100px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  animation: pageSpinner 0.8s infinite linear;
-}
-.chronograf-root > .page-spinner {
-   // Center the spinner based on the main content window, not the entire screen
-  left: calc(50% + #{$sidebar--width});
-}
-
-@keyframes pageSpinner {
-  0% {
-    transform: translate(-50%,-50%) rotate(0deg);
-    border-left-color: $c-pool;
-  }
-  25% {
-    border-left-color: $c-comet;
-  }
-  50% {
-    border-left-color: $c-pool;
-  }
-  75% {
-    border-left-color: $c-rainforest;
-  }
-  100% {
-    transform: translate(-50%,-50%) rotate(360deg);
-    border-left-color: $c-pool;
-  }
-}
diff --git a/ui/src/shared/containers/GetLinks.tsx b/ui/src/shared/containers/GetLinks.tsx
index 9d65d0372b4..061493f1cda 100644
--- a/ui/src/shared/containers/GetLinks.tsx
+++ b/ui/src/shared/containers/GetLinks.tsx
@@ -1,11 +1,19 @@
+// Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+
+// Types
 import {RemoteDataState} from 'src/types'
 
-import {ErrorHandling} from 'src/shared/decorators/errors'
+// Actions
 import {getLinks} from 'src/shared/actions/links'
 
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface PassedInProps {
   children: React.ReactElement<any>
 }
@@ -15,7 +23,7 @@ interface ConnectDispatchProps {
 }
 
 interface State {
-  ready: RemoteDataState
+  loading: RemoteDataState
 }
 
 type Props = ConnectDispatchProps & PassedInProps
@@ -26,21 +34,23 @@ class GetLinks extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      ready: RemoteDataState.NotStarted,
+      loading: RemoteDataState.NotStarted,
     }
   }
 
   public async componentDidMount() {
     await this.props.getLinks()
-    this.setState({ready: RemoteDataState.Done})
+    this.setState({loading: RemoteDataState.Done})
   }
 
   public render() {
-    if (this.state.ready !== RemoteDataState.Done) {
-      return <div className="page-spinner" />
-    }
+    const {loading} = this.state
 
-    return this.props.children && React.cloneElement(this.props.children)
+    return (
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
+    )
   }
 }
 
diff --git a/ui/src/shared/containers/GetMe.tsx b/ui/src/shared/containers/GetMe.tsx
index 536321f02da..1ba5ddec0fa 100644
--- a/ui/src/shared/containers/GetMe.tsx
+++ b/ui/src/shared/containers/GetMe.tsx
@@ -1,11 +1,19 @@
+// Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+
+// Types
 import {RemoteDataState} from 'src/types'
 
-import {ErrorHandling} from 'src/shared/decorators/errors'
+// Actions
 import {getMe} from 'src/shared/actions/v2/me'
 
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface PassedInProps {
   children: React.ReactElement<any>
 }
@@ -15,7 +23,7 @@ interface ConnectDispatchProps {
 }
 
 interface State {
-  ready: RemoteDataState
+  loading: RemoteDataState
 }
 
 type Props = ConnectDispatchProps & PassedInProps
@@ -26,21 +34,23 @@ class GetMe extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      ready: RemoteDataState.NotStarted,
+      loading: RemoteDataState.NotStarted,
     }
   }
 
   public render() {
-    if (this.state.ready !== RemoteDataState.Done) {
-      return <div className="page-spinner" />
-    }
+    const {loading} = this.state
 
-    return this.props.children && React.cloneElement(this.props.children)
+    return (
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
+    )
   }
 
   public async componentDidMount() {
     await this.props.getMe()
-    this.setState({ready: RemoteDataState.Done})
+    this.setState({loading: RemoteDataState.Done})
   }
 }
 
diff --git a/ui/src/shared/containers/GetOrganizations.tsx b/ui/src/shared/containers/GetOrganizations.tsx
index e3793a6e455..2bf4dda7a77 100644
--- a/ui/src/shared/containers/GetOrganizations.tsx
+++ b/ui/src/shared/containers/GetOrganizations.tsx
@@ -1,9 +1,17 @@
+// Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+
+// Types
 import {RemoteDataState} from 'src/types'
 
+// Actions
 import {getOrganizations} from 'src/organizations/actions'
+
+// Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface PassedInProps {
@@ -17,7 +25,7 @@ interface ConnectDispatchProps {
 type Props = ConnectDispatchProps & PassedInProps
 
 interface State {
-  ready: RemoteDataState
+  loading: RemoteDataState
 }
 
 @ErrorHandling
@@ -26,21 +34,23 @@ class GetOrganizations extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      ready: RemoteDataState.NotStarted,
+      loading: RemoteDataState.NotStarted,
     }
   }
 
   public async componentDidMount() {
     await this.props.getOrganizations()
-    this.setState({ready: RemoteDataState.Done})
+    this.setState({loading: RemoteDataState.Done})
   }
 
   public render() {
-    if (this.state.ready !== RemoteDataState.Done) {
-      return <div className="page-spinner" />
-    }
+    const {loading} = this.state
 
-    return this.props.children && React.cloneElement(this.props.children)
+    return (
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
+    )
   }
 }
 
diff --git a/ui/src/shared/containers/GetSources.test.tsx b/ui/src/shared/containers/GetSources.test.tsx
index 643b0451cf2..192ee5382a4 100644
--- a/ui/src/shared/containers/GetSources.test.tsx
+++ b/ui/src/shared/containers/GetSources.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 import {GetSources} from 'src/shared/containers/GetSources'
 import MockChild from 'mocks/MockChild'
+import {SpinnerContainer} from 'src/clockface'
 
 import {source} from 'mocks/dummyData'
 
@@ -46,7 +47,7 @@ describe('CheckSources', () => {
 
     it('renders a spinner when the component is fetching', () => {
       const {wrapper} = setup()
-      const spinner = wrapper.find('.page-spinner')
+      const spinner = wrapper.find(SpinnerContainer)
 
       expect(spinner.exists()).toBe(true)
     })
diff --git a/ui/src/shared/containers/GetSources.tsx b/ui/src/shared/containers/GetSources.tsx
index 4758e2c61b1..a493f990277 100644
--- a/ui/src/shared/containers/GetSources.tsx
+++ b/ui/src/shared/containers/GetSources.tsx
@@ -2,9 +2,16 @@
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+
+// Types
 import {RemoteDataState} from 'src/types'
 
+// Actions
 import {readSources} from 'src/sources/actions'
+
+// Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
@@ -13,7 +20,7 @@ interface Props {
 }
 
 interface State {
-  ready: RemoteDataState
+  loading: RemoteDataState
 }
 
 @ErrorHandling
@@ -22,22 +29,24 @@ export class GetSources extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      ready: RemoteDataState.NotStarted,
+      loading: RemoteDataState.NotStarted,
     }
   }
 
   public async componentDidMount() {
     await this.props.onReadSources()
 
-    this.setState({ready: RemoteDataState.Done})
+    this.setState({loading: RemoteDataState.Done})
   }
 
   public render() {
-    if (this.state.ready !== RemoteDataState.Done) {
-      return <div className="page-spinner" />
-    }
+    const {loading} = this.state
 
-    return this.props.children && React.cloneElement(this.props.children)
+    return (
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
+    )
   }
 }
 
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 3639c9473a7..a972904411b 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -21,7 +21,6 @@
 @import 'src/shared/components/notifications/Notifications';
 @import 'src/shared/components/threesizer/Threesizer';
 @import 'src/shared/components/graph_tips/GraphTips';
-@import 'src/shared/components/page_spinner/PageSpinner';
 @import 'src/shared/components/cells/Dashboards';
 @import 'src/shared/components/dygraph/Dygraph';
 @import 'src/shared/components/splash_page/SplashPage';