From 4aeede876535992ae39a0fb401c25adb6f6ed651 Mon Sep 17 00:00:00 2001
From: Adrian Gaudebert <adrian@gaudebert.fr>
Date: Fri, 28 Jul 2017 19:58:36 +0200
Subject: [PATCH] Added a full CSS loading spinner.

---
 css/style.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  8 +++++++-
 js/main.js    |  2 ++
 3 files changed, 65 insertions(+), 1 deletion(-)

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 @@
             </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>
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({