File size: 1,380 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <template>
<div
:class="['spinner', sizeClasses, colorClass]"
role="status"
:aria-label="t('common.loading')"
>
<span class="sr-only">{{ t('common.loading') }}</span>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
type SpinnerColor = 'primary' | 'secondary' | 'white' | 'gray'
interface Props {
size?: SpinnerSize
color?: SpinnerColor
}
const props = withDefaults(defineProps<Props>(), {
size: 'md',
color: 'primary'
})
const sizeClasses = computed(() => {
const sizes: Record<SpinnerSize, string> = {
sm: 'w-4 h-4 border-2',
md: 'w-8 h-8 border-2',
lg: 'w-12 h-12 border-[3px]',
xl: 'w-16 h-16 border-4'
}
return sizes[props.size]
})
const colorClass = computed(() => {
const colors: Record<SpinnerColor, string> = {
primary: 'text-primary-500',
secondary: 'text-gray-500 dark:text-dark-400',
white: 'text-white',
gray: 'text-gray-400 dark:text-dark-500'
}
return colors[props.color]
})
</script>
<style scoped>
.spinner {
@apply inline-block rounded-full border-solid border-current border-r-transparent;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
|