77 lines
2.8 KiB
Vue
77 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file GlobalLoader.vue
|
|
* @description คอมโพเนนต์หน้าจอโหลดแบบเต็มจอ (Global full-screen loading) แสดงผลตอนเปลี่ยนหน้า
|
|
* พร้มแอนิเมชันโลโก้ขยับได้แบบพรีเมียม
|
|
*/
|
|
|
|
const nuxtApp = useNuxtApp()
|
|
const isLoading = ref(false)
|
|
|
|
// ดักจับจังหวะการเปลี่ยนหน้าผ่าย Nuxt hook (Hook into Nuxt page transitions)
|
|
nuxtApp.hook('page:start', () => {
|
|
isLoading.value = true
|
|
})
|
|
|
|
nuxtApp.hook('page:finish', () => {
|
|
// หน่วงเวลาเล็กน้อยเพื่อให้ไหลลื่น ไม่กระพริบเร็วไปหากหน้าโหลดเสร็จไว (Add a small delay for better UX)
|
|
setTimeout(() => {
|
|
isLoading.value = false
|
|
}, 500)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<div v-if="isLoading" class="fixed inset-0 z-[99999] flex flex-col items-center justify-center bg-white dark:bg-[#0f172a] transition-colors duration-300">
|
|
<div class="relative flex flex-col items-center">
|
|
<!-- กล่องโลโก้หลัก (Main Logo Box) -->
|
|
<div class="w-20 h-20 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6 animate-pulse-soft">
|
|
<div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-600/30 animate-bounce-subtle">
|
|
<span class="text-2xl font-black text-white">E</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ข้อความระหว่างโหลด (Loading Text) -->
|
|
<div class="flex flex-col items-center gap-2">
|
|
<h3 class="text-lg font-bold text-slate-800 dark:text-white tracking-wide">e-Learning</h3>
|
|
<div class="flex gap-1">
|
|
<div class="w-2 h-2 rounded-full bg-blue-500 animate-bounce" style="animation-delay: 0s"/>
|
|
<div class="w-2 h-2 rounded-full bg-blue-500 animate-bounce" style="animation-delay: 0.1s"/>
|
|
<div class="w-2 h-2 rounded-full bg-blue-500 animate-bounce" style="animation-delay: 0.2s"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes pulse-soft {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.9; }
|
|
}
|
|
|
|
@keyframes bounce-subtle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
|
|
.animate-pulse-soft {
|
|
animation: pulse-soft 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-bounce-subtle {
|
|
animation: bounce-subtle 2s ease-in-out infinite;
|
|
}
|
|
</style>
|