hrms-edm/Services/client/src/components/FullLoader.vue

<script setup lang="ts">
import { watch, ref } from 'vue'

const props = defineProps({ visibility: Boolean })
const visible = ref<boolean>(props.visibility)

watch(props, () => (visible.value = props.visibility))
</script>

<template>
  <q-inner-loading :showing="visible" class="loader">
    <q-spinner-cube size="80px" color="primary" />
  </q-inner-loading>
</template>

<style lang="scss">
.loader {
  z-index: 1000;
}
</style>