Nuxt/packages/ui-templates/templates/loading/index.html

81 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>{{ messages.loading }} | {{ messages.appName }}</title>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
<script type="module" src="/styles.ts"></script>
<style>
.nuxt-loader-bar {
background: #00DC82;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 3px;
}
.triangle-loading {
position: absolute;
}
.triangle-loading>path {
fill: none;
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round;
/* Stroke-dasharray property */
stroke-dasharray: 128;
stroke-dashoffset: 128;
animation: nuxt-loading-move 3s linear infinite;
}
.nuxt-logo:hover .triangle-loading>path {
animation-play-state: paused;
}
@keyframes nuxt-loading-move {
100% {
stroke-dashoffset: -128;
}
}
@media (prefers-color-scheme: dark) {
html, body {
color: white;
color-scheme: dark;
}
}
</style>
</head>
<body class="font-sans antialiased relative overflow-hidden min-h-screen bg-white dark:bg-[#020420] text-[#020420] dark:text-white flex flex-col justify-center items-center text-center">
<a href="https://nuxt.com/?utm_source=nuxt-loading-screen" target="_blank" rel="noopener" class="nuxt-logo group flex items-end gap-4" id="nuxtImg">
<div class="relative">
<svg class="triangle-loading text-[#00DC82]/80 group-hover:text-[#00DC82]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80">
<path stroke="currentColor" d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567" />
</svg>
<svg class="dark:text-gray-200 dark:group-hover:text-white text-[#020420]/80 group-hover:text-[#020420]" xmlns="http://www.w3.org/2000/svg" width="214" height="53" fill="none" viewBox="0 0 800 200">
<path fill="currentColor" d="M377 200a4 4 0 0 0 4-4v-93s5.244 8.286 15 25l38.707 66.961c1.789 3.119 5.084 5.039 8.649 5.039H470V50h-27a4 4 0 0 0-4 4v94l-17-30-36.588-62.98c-1.792-3.108-5.081-5.02-8.639-5.02H350v150h27ZM676.203 143.857 710.551 92h-25.73a9.972 9.972 0 0 0-8.333 4.522L660.757 120.5l-15.731-23.978A9.972 9.972 0 0 0 636.693 92h-25.527l34.348 51.643L608.524 200h24.966a9.969 9.969 0 0 0 8.29-4.458l19.18-28.756 18.981 28.72a9.968 9.968 0 0 0 8.313 4.494h24.736l-36.787-56.143ZM724.598 92h19.714V60.071h28.251V92H800v24.857h-27.437V159.5c0 10.5 5.284 15.429 14.43 15.429H800V200h-16.869c-23.576 0-38.819-14.143-38.819-39.214v-43.929h-19.714V92ZM590 92h-15c-3.489 0-6.218.145-8.5 2.523-2.282 2.246-2.5 3.63-2.5 7.066v52.486c0 8.058-.376 12.962-4 16.925-3.624 3.831-8.619 5-16 5-7.247 0-12.376-1.169-16-5-3.624-3.963-4-8.867-4-16.925v-52.486c0-3.435-.218-4.82-2.5-7.066C519.218 92.145 516.489 92 513 92h-15v62.422c0 14.004 3.892 25.101 11.676 33.292C517.594 195.905 529.103 200 544 200c14.897 0 26.204-4.095 34.123-12.286 7.918-8.191 11.877-19.288 11.877-33.292V92Z" />
</svg>
</div>
<span class="inline-block font-mono leading-none text-[#00DC82] group-hover:border-[#00DC42] text-[16px] font-semibold border-[#00DC42]/50 bg-[#00DC42]/10 group-hover:bg-[#00DC42]/15 px-2.5 py-1.5 border rounded">{{ version }}</span>
</a>
<div class="nuxt-loader-bar"></div>
<script>
if (typeof window.fetch === 'undefined') {
setTimeout(() => window.location.reload(), 200)
} else {
const check = async () => {
try {
const body = await window
.fetch(window.location.href)
.then(r => r.text())
if (!body.includes('__NUXT_LOADING__')) {
return window
.location
.reload()
}
} catch {}
setTimeout(check, 200)
}
check()
}
</script>
</body>
</html>