77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file GlobalLoader.vue
|
|
* @description Global full-screen loading overlay that triggers during page navigation.
|
|
* Uses a premium pulsing logo animation.
|
|
*/
|
|
|
|
const nuxtApp = useNuxtApp()
|
|
const isLoading = ref(false)
|
|
|
|
// Hook into Nuxt page transitions
|
|
nuxtApp.hook('page:start', () => {
|
|
isLoading.value = true
|
|
})
|
|
|
|
nuxtApp.hook('page:finish', () => {
|
|
// Add a small delay for better UX (prevents flickering on fast loads)
|
|
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>
|