diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss
index 50f6ef1c8..fa69b4f92 100644
--- a/ui/app/styles/components.scss
+++ b/ui/app/styles/components.scss
@@ -6,6 +6,7 @@
 @import "./components/inline-definitions";
 @import "./components/job-diff";
 @import "./components/json-viewer";
+@import "./components/loading-spinner";
 @import "./components/metrics";
 @import "./components/node-status-light";
 @import "./components/status-text";
diff --git a/ui/app/styles/components/loading-spinner.scss b/ui/app/styles/components/loading-spinner.scss
new file mode 100644
index 000000000..0bf07e49e
--- /dev/null
+++ b/ui/app/styles/components/loading-spinner.scss
@@ -0,0 +1,71 @@
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+
+  .loading-spinner-square {
+    width: 33%;
+    height: 33%;
+    background-color: $primary;
+    float: left;
+    animation: loading-spinner-squareGridScaleDelay 1.3s infinite ease-in-out;
+  }
+
+  .loading-spinner-square1 {
+    animation-delay: 0.2s;
+  }
+
+  .loading-spinner-square2 {
+    animation-delay: 0.3s;
+  }
+
+  .loading-spinner-square3 {
+    animation-delay: 0.4s;
+  }
+
+  .loading-spinner-square4 {
+    animation-delay: 0.1s;
+  }
+
+  .loading-spinner-square5 {
+    animation-delay: 0.2s;
+  }
+
+  .loading-spinner-square6 {
+    animation-delay: 0.3s;
+  }
+
+  .loading-spinner-square7 {
+    animation-delay: 0s;
+  }
+
+  .loading-spinner-square8 {
+    animation-delay: 0.1s;
+  }
+
+  .loading-spinner-square9 {
+    animation-delay: 0.2s;
+  }
+}
+
+@-webkit-keyframes loading-spinner-squareGridScaleDelay {
+  0%,
+  70%,
+  100% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    transform: scale3D(0, 0, 1);
+  }
+}
+
+@keyframes loading-spinner-squareGridScaleDelay {
+  0%,
+  70%,
+  100% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    transform: scale3D(0, 0, 1);
+  }
+}
diff --git a/ui/app/templates/partials/loading-spinner.hbs b/ui/app/templates/partials/loading-spinner.hbs
new file mode 100644
index 000000000..ee8ca9fa7
--- /dev/null
+++ b/ui/app/templates/partials/loading-spinner.hbs
@@ -0,0 +1,11 @@
+<div class="loading-spinner">
+  <div class="loading-spinner-square loading-spinner-square1"></div>
+  <div class="loading-spinner-square loading-spinner-square2"></div>
+  <div class="loading-spinner-square loading-spinner-square3"></div>
+  <div class="loading-spinner-square loading-spinner-square4"></div>
+  <div class="loading-spinner-square loading-spinner-square5"></div>
+  <div class="loading-spinner-square loading-spinner-square6"></div>
+  <div class="loading-spinner-square loading-spinner-square7"></div>
+  <div class="loading-spinner-square loading-spinner-square8"></div>
+  <div class="loading-spinner-square loading-spinner-square9"></div>
+</div>