isset Böyle bir şeye hiç gerek yok. https://samherbert.net/svg-loaders/ adresinde animasyonlu svg'ler var. İstediğinizi indirin, mesela loading.svg olarak kaydedin. Rengini değiştirmek istiyorsanız dosya olarak açıp içindeki stiller ile oynayabilirsiniz. Bunu componente çevirin:
<script setup>
const props = defineProps({
isLoading: {
type: Boolean,
default: false
},
})
</script>
<template>
<div v-if="isLoading" class="absolute z-50 flex w-full h-full inset-0 items-center justify-center">
<div class="absolute bg-black bg-opacity-25 w-full h-full z-0"></div>
<img class="z-10 h-10" src="/assets/loading.svg">
</div>
</template>
İstediğiniz yerde kullanın:
<Loader :is-loading="postsLoading" />