Added a full CSS loading spinner.

css/style.css

@@ -95,3 +95,59 @@ button:active {
     text-overflow: ellipsis;
     width: 100%;
 }
+
+
+/* Spinner */
+/* Source: http://tobiasahlin.com/spinkit/ */
+.spinner {
+  margin: 100px auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #dbdbdb;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}

index.html

@@ -28,7 +28,13 @@
             </header>
 
             <section class="loading" v-if="!ready">
-                <img src="img/loader.gif" alt="Loading" />
+                <div class="spinner">
+                    <div class="rect1"></div>
+                    <div class="rect2"></div>
+                    <div class="rect3"></div>
+                    <div class="rect4"></div>
+                    <div class="rect5"></div>
+                </div>
             </section>
 
             <section class="sounds" v-else>

js/main.js

@@ -45,6 +45,8 @@ Vue.component('ghetto-sound', {
     },
 });
 
+// This is a the request to get the main JSON file that drives the website.
+// Only load the view when that file is downloaded.
 GHETTO_SOURCE_REQUEST.then(function (source) {
     var data = Object.assign({}, source, { ready: true });
     var app = new Vue({