<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>
