Add loading spinner

src/components/HomeDownloadBeta.vue

@@ -7,17 +7,19 @@
       :released="version.released"
       :github="version.github"
       :download="version.download" />
-    <div v-if="versions === null" class="loading">Loading</div>
+    <spinner class="loading" v-if="versions === null" />
   </div>
 </template>
 
 <script>
 import HomeDownloadBetaItem from './HomeDownloadBetaItem.vue';
+import Spinner from './Spinner.vue';
 
 export default {
   name: 'home-download-beta',
   components: {
     HomeDownloadBetaItem,
+    Spinner,
   },
   asyncComputed: {
     async versions() {
@@ -107,12 +109,8 @@ export default {
   }
 
   .loading {
-    text-align: center;
     margin-top: 16px;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 300;
     margin-left: auto;
     margin-right: auto;
-    font-size: 24px;
   }
 </style>

src/components/HomeDownloadDev.vue

@@ -18,7 +18,7 @@
       :user="version.user"
       :build="version.build"
       :commit="version.commit" />
-    <div v-if="versions === null" class="loading">Loading</div>
+    <spinner class="loading" v-if="versions === null || master === null" />
   </div>
 </template>
 
@@ -26,12 +26,14 @@
 import moment from 'moment';
 import HomeDownloadDevItem from './HomeDownloadDevItem.vue';
 import HomeDownloadDevMaster from './HomeDownloadDevMaster.vue';
+import Spinner from './Spinner.vue';
 
 export default {
   name: 'home-download-dev',
   components: {
     HomeDownloadDevItem,
     HomeDownloadDevMaster,
+    Spinner,
   },
   asyncComputed: {
     async master() {
@@ -94,12 +96,8 @@ export default {
   }
 
   .loading {
-    text-align: center;
     margin-top: 16px;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 300;
     margin-left: auto;
     margin-right: auto;
-    font-size: 24px;
   }
 </style>

src/components/Spinner.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="spinner">
+    <div class="bounce1"></div>
+    <div class="bounce2"></div>
+    <div class="bounce3"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .spinner {
+    width: 70px;
+    text-align: center;
+
+    & > div {
+      width: 18px;
+      height: 18px;
+      background-color: #333;
+
+      border-radius: 100%;
+      display: inline-block;
+      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    }
+
+    .bounce1 {
+      -webkit-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
+
+    .bounce2 {
+      -webkit-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
+  }
+
+  @-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+  }
+
+  @keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    } 40% {
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+    }
+  }
+</style>