26 lines
		
	
	
		
			576 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			26 lines
		
	
	
		
			576 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <transition name="fade">
 | |
|     <div v-if="data.isLoading" class="fixed inset-0 z-50 flex items-center justify-center">
 | |
|       <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
 | |
|       <img src="/loader.svg" alt="Loading" class="relative h-40 w-40" />
 | |
|     </div>
 | |
|   </transition>
 | |
| </template>
 | |
| 
 | |
| <script setup lang="ts">
 | |
| import { useDataStore } from '~/store/data'
 | |
| const data = useDataStore()
 | |
| </script>
 | |
| 
 | |
| <style scoped>
 | |
| .fade-enter-active,
 | |
| .fade-leave-active {
 | |
|   transition: opacity 0.15s ease;
 | |
| }
 | |
| 
 | |
| .fade-enter-from,
 | |
| .fade-leave-to {
 | |
|   opacity: 0;
 | |
| }
 | |
| </style>
 |