misc: SPA loading indicator improvements

lib/app/views/loading/default.html

@@ -1,24 +1,60 @@
 <style>
-body, html, #__nuxt {
+#nuxt-loading {
-  background-color: <%= options.background %>;
+  visibility: hidden;
-  width: 100%;
+  opacity: 0;
-  height: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0;
-  padding: 0;
   flex-direction: column;
+  animation: nuxtLoadingIn 10s ease;
+  -webkit-animation: nuxtLoadingIn 10s ease;
+  animation-fill-mode: forwards;
+  overflow: hidden;
 }
 
-.loader,
+@keyframes nuxtLoadingIn {
-.loader:after {
+  0% {
+    visibility: hidden;
+    opacity: 0;
+  }
+  20% {
+    visibility: visible;
+    opacity: 0;
+  }
+  100% {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes nuxtLoadingIn {
+  0% {
+    visibility: hidden;
+    opacity: 0;
+  }
+  20% {
+    visibility: visible;
+    opacity: 0;
+  }
+  100% {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+#nuxt-loading>div,
+#nuxt-loading>div:after {
   border-radius: 50%;
   width: 5rem;
   height: 5rem;
 }
 
-.loader {
+#nuxt-loading>div {
   margin: 60px auto;
   font-size: 10px;
   position: relative;
@@ -28,16 +64,16 @@ body, html, #__nuxt {
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
-  -webkit-animation: load8 1.1s infinite linear;
+  -webkit-animation: nuxtLoading 1.1s infinite linear;
-  animation: load8 1.1s infinite linear;
+  animation: nuxtLoading 1.1s infinite linear;
 }
 
-.loader.error {
+#nuxt-loading.error>div {
   border-left: .5rem solid #ff4500;
   animation-duration: 5s;
 }
 
-@-webkit-keyframes load8 {
+@-webkit-keyframes nuxtLoading {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
@@ -48,7 +84,7 @@ body, html, #__nuxt {
   }
 }
 
-@keyframes load8 {
+@keyframes nuxtLoading {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
@@ -62,11 +98,11 @@ body, html, #__nuxt {
 
 <script>
 window.addEventListener('error', function() {
-  var e = document.getElementById("loader");
+  var e = document.getElementById("nuxt-loading");
   if (e) e.className += " error";
 });
 </script>
 
-<div class="loader"><%= options.loading %></div>
+<div id="nuxt-loading" aria-live="polite" role="status"><div><%= options.loading %></div></div>
 
 <%= options.dev ? '<!-- https://projects.lukehaas.me/css-loaders -->' : '' %>