46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<template>
|
|
<NuxtLoadingIndicator :height="4" :duration="3000" color="#16a34a" />
|
|
|
|
<Transition name="route-loader-fade">
|
|
<div
|
|
v-if="routeLoading"
|
|
class="fixed inset-0 z-[999] flex items-center justify-center bg-base-100/45 backdrop-blur-sm"
|
|
aria-live="polite"
|
|
aria-busy="true"
|
|
>
|
|
<div class="flex items-center gap-3 rounded-full border border-base-300 bg-base-100/90 px-5 py-3 shadow-xl">
|
|
<span class="loading loading-spinner loading-md text-primary" />
|
|
<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': 'cupcake',
|
|
},
|
|
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>
|