36 lines
761 B
Vue
36 lines
761 B
Vue
<template>
|
|
<!-- Loader Container -->
|
|
<div v-if="isLoading" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-50">
|
|
<!-- Loader Spinner -->
|
|
<div class="w-16 h-16 border-t-4 border-blue-500 border-solid rounded-full animate-spin"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// Props to control loader visibility
|
|
const props = defineProps({
|
|
isLoading: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Styling for the loader spinner */
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
div {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
</style>
|
|
|