Added a full CSS loading spinner.

This commit is contained in:
Adrian 2017-07-28 19:58:36 +02:00
parent c64a589ab7
commit 4aeede8765
3 changed files with 65 additions and 1 deletions

View File

@ -95,3 +95,59 @@ button:active {
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; 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);
}
}

View File

@ -28,7 +28,13 @@
</header> </header>
<section class="loading" v-if="!ready"> <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>
<section class="sounds" v-else> <section class="sounds" v-else>

View File

@ -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) { GHETTO_SOURCE_REQUEST.then(function (source) {
var data = Object.assign({}, source, { ready: true }); var data = Object.assign({}, source, { ready: true });
var app = new Vue({ var app = new Vue({