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

chore(templates): animate the loading bar too

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