31 lines
1.1 KiB
Vue
Executable File
31 lines
1.1 KiB
Vue
Executable File
<template>
|
||
<div class="flex flex-col items-center justify-center h-full py-8">
|
||
<div :class="['relative', sizeClass]" role="status" aria-label="در حال بارگذاری">
|
||
<!-- ساده و مینیمال اسپینر دایرهای با tail پرایمری (آبی) -->
|
||
<div class="w-16 h-16 rounded-full border-8 border-gray-200 dark:border-gray-700 border-t-primary-500 dark:border-t-primary-500 animate-spin"></div>
|
||
</div>
|
||
|
||
<p class="mt-6 text-lg font-medium text-gray-700 dark:text-gray-300">{{ loadingText }}</p>
|
||
<p class="mt-2 text-sm text-primary-600 dark:text-primary-400 animate-pulse">لطفاً صبر کنید...</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
loadingText: { type: String, default: 'در حال بارگذاری...' },
|
||
loadingSize: { type: String, default: 'md' }, // sm, md, lg
|
||
})
|
||
|
||
const sizeClass = computed(() => {
|
||
switch (props.loadingSize) {
|
||
case 'sm':
|
||
return 'scale-75'
|
||
case 'lg':
|
||
return 'scale-150'
|
||
default:
|
||
return ''
|
||
}
|
||
})
|
||
</script> |