Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-27 16:12:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc: SPA loading indicator improvements

Browse Source
This commit is contained in:
Pooya Parsa 2018-03-26 00:38:36 +04:30
parent 5bc211b6fe
commit 8b82168f12
1 changed files with 52 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
lib/app/views/loading/default.html
View File

@ -1,24 +1,60 @@
<style>
body, html, #__nuxt {
background-color: <%= options.background %>;
width: 100%;
height: 100%;
#nuxt-loading {
visibility: hidden;
opacity: 0;
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,
.loader:after {
@keyframes nuxtLoadingIn {
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;
animation: load8 1.1s infinite linear;
-webkit-animation: nuxtLoading 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 -->' : '' %>