mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
misc: SPA loading indicator improvements
This commit is contained in:
parent
5bc211b6fe
commit
8b82168f12
@ -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 -->' : '' %>
|
||||
|
Loading…
Reference in New Issue
Block a user