24 lines
652 B
Vue
24 lines
652 B
Vue
<script setup lang="ts">
|
|
defineProps<{ size?: 'sm' | 'md' | 'lg' }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="spinner-wrap">
|
|
<div class="spinner" :class="size ?? 'md'" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 24px; }
|
|
.spinner {
|
|
border-radius: 50%;
|
|
border: 3px solid var(--color-primary-a20);
|
|
border-top-color: var(--color-primary);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
.sm { width: 20px; height: 20px; }
|
|
.md { width: 36px; height: 36px; }
|
|
.lg { width: 56px; height: 56px; border-width: 4px; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|