serega404
047611fd24
🚀 Create and publish a Docker image / Detect changes in backend and frontend (push) Successful in 5s
🚀 Create and publish a Docker image / Build & publish backend image (push) Successful in 8s
🚀 Create and publish a Docker image / Update stack on Portainer (push) Successful in 3s
24 lines
647 B
Vue
24 lines
647 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 rgba(34,197,94,0.2);
|
|
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>
|