Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(templates): animate the loading bar too

This commit is contained in:
Sébastien Chopin 2022-07-12 16:12:16 +02:00
parent 54dc4c8502
commit 66800436e4
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui-templates/templates/loading/index.html
View File

@ -19,7 +19,7 @@
width: 100%;
background-size: 200% auto;
background-position: 0 0;
animation: gradient 2s infinite;
animation: gradient 2s infinite, width 8s infinite ease-in-out;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@ -36,6 +36,17 @@
background-position: -200% 0;
}
}
@keyframes width {
0% {
width: 100%;
}
50% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body class="relative min-h-screen bg-white dark:bg-black flex flex-col justify-center items-center text-center">
@ -49,7 +60,7 @@
<div class="spotlight-wrapper">
<div class="fixed left-0 right-0 spotlight spotlight-bottom z-q0"></div>
</div>
<div class="nuxt-loader-bar h-[4px] w-80 inline rounded"/>
<div class="nuxt-loader-bar h-[4px] inline rounded"/>
<script>
const nuxtImg = window.document.getElementById('nuxtImg')
const body = window.document.body