32 lines
1.3 KiB
Vue
32 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
</script>
|
|
|
|
<template>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
|
|
<circle class="ring-spin" cx="60" cy="60" r="54" fill="none" stroke="#ffc107" stroke-width="1" stroke-dasharray="4 6" opacity="0.6"/>
|
|
|
|
<!-- Static inner ring -->
|
|
<circle cx="60" cy="60" r="46" fill="none" stroke="#ffc107" stroke-width="0.5" opacity="0.3"/>
|
|
|
|
<!-- Pulsing dot markers on inner ring -->
|
|
<circle class="ring-pulse" cx="60" cy="14" r="2" fill="#ffc107"/>
|
|
<circle class="ring-pulse" cx="106" cy="60" r="2" fill="#ffc107" style="animation-delay: 0.5s"/>
|
|
<circle class="ring-pulse" cx="60" cy="106" r="2" fill="#ffc107" style="animation-delay: 1s"/>
|
|
<circle class="ring-pulse" cx="14" cy="60" r="2" fill="#ffc107" style="animation-delay: 1.5s"/>
|
|
<text x="60" y="63" text-anchor="middle" font-size="6" letter-spacing="2.5" fill="#ffc107" font-family="monospace" opacity="0.7">Loading</text>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes pulse {
|
|
0%,100% { opacity: 0.3; }
|
|
50% { opacity: 1; }
|
|
}
|
|
.ring-spin { animation: spin 8s linear infinite; transform-origin: 60px 60px; }
|
|
.ring-pulse { animation: pulse 2s ease-in-out infinite; }
|
|
</style>
|