diff --git a/css/style.css b/css/style.css
index 46de137..efe4d1b 100644
--- a/css/style.css
+++ b/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);
+ }
+}
diff --git a/index.html b/index.html
index 51f2e1b..57c6ea5 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,13 @@
-
+
diff --git a/js/main.js b/js/main.js
index 9b86f71..648bc39 100644
--- a/js/main.js
+++ b/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({