diff --git a/oh_queue/static/css/style.css b/oh_queue/static/css/style.css
index 1397b89..07c2f7f 100644
--- a/oh_queue/static/css/style.css
+++ b/oh_queue/static/css/style.css
@@ -26,6 +26,58 @@ a:hover {
   text-decoration:none;
 }
 
+/* Loading Spinner */
+    .spinner {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  text-align: center;
+
+  -webkit-animation: sk-rotate 2.0s infinite linear;
+  animation: sk-rotate 2.0s infinite linear;
+}
+
+.dot1, .dot2 {
+  width: 60%;
+  height: 60%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  background-color: #333;
+  border-radius: 100%;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.dot2 {
+  top: auto;
+  bottom: 0;
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
+@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}
+
+
+
 /* Queue styles */
 
 .container,
diff --git a/oh_queue/static/js/components/base.js b/oh_queue/static/js/components/base.js
index f2a0c84..1ca5ffe 100644
--- a/oh_queue/static/js/components/base.js
+++ b/oh_queue/static/js/components/base.js
@@ -5,8 +5,13 @@ let Base = ({state, children}) => {
     requestNotificationPermission();
   }
 
-  // TODO loading indicator instead of blank screen
-  if (!state.loaded) return null;
+  // TODO better loading indicator (less jarring)
+  if (!state.loaded) return (
+    <div className="spinner">
+      <div className="dot1"></div>
+      <div className="dot2"></div>
+    </div>
+  )
 
   return (
     <div>