46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<template>
|
|
<NuxtLoadingIndicator :height="4" :duration="3000" color="#2f2418" />
|
|
|
|
<Transition name="route-loader-fade">
|
|
<div
|
|
v-if="routeLoading"
|
|
class="fixed inset-0 z-[999] flex items-center justify-center bg-[#f5efe7]/65 backdrop-blur-sm"
|
|
aria-live="polite"
|
|
aria-busy="true"
|
|
>
|
|
<div class="flex items-center gap-3 rounded-full border border-[#ded2bf] bg-white/92 px-5 py-3 shadow-[0_18px_40px_rgba(47,36,24,0.12)]">
|
|
<span class="loading loading-spinner loading-md text-[#2f2418]" />
|
|
<span class="text-sm font-medium text-base-content">{{ t('common.loading') }}</span>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<NuxtLayout>
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const routeLoading = useState<boolean>('route-loading', () => false)
|
|
const { t } = useI18n()
|
|
|
|
useHead({
|
|
htmlAttrs: {
|
|
'data-theme': 'silk',
|
|
},
|
|
script: []
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.route-loader-fade-enter-active,
|
|
.route-loader-fade-leave-active {
|
|
transition: opacity 0.16s ease;
|
|
}
|
|
|
|
.route-loader-fade-enter-from,
|
|
.route-loader-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|