Add loading spinner

src/css/_modifiers.scss

@@ -6,6 +6,32 @@
     font-family: Splatoon2, $family-sans-serif;
 }
 
+.fa-spin {
+    -webkit-animation: fa-spin 2s infinite linear;
+    animation: fa-spin 2s infinite linear;
+}
+
+@-webkit-keyframes fa-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@keyframes fa-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
 .title-color {
     color: $title-color;
 }

src/css/main.scss

@@ -10,6 +10,16 @@ html {
     background-color: #191919;
 }
 
+.squid-refresh {
+    &:before {
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        @extend .font-splatoon2;
+        content: "\e066";
+    }
+}
+
 .schedule-box {
     @extend .product-box;
     @extend .bg-stripes;

src/js/components/App.vue

@@ -19,8 +19,10 @@
 
         <div class="hero-body">
             <div class="container is-fluid">
-                <div v-if="loading">
-                    Loading...
+                <div v-if="loading" class="has-text-centered">
+                    <span class="icon is-large">
+                        <span class="fa fa-spin squid-refresh"></span>
+                    </span>
                 </div>
                 <div v-else>
                     <div class="columns is-desktop">
@@ -42,7 +44,6 @@
                             </div>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>