<script setup lang="ts">

import { computed } from 'vue';



const props = defineProps<{

  size?: number;

  progress?: number;

  active?: boolean;

}>();



const rotation = computed(() => (props.progress ?? 0) * 360);

const wrapperStyle = computed(() => {

  if (props.active) return {};

  return {

    transform: `rotate(${rotation.value}deg)`,

    transition: 'transform 0.05s linear',

  };

});

</script>



<template>

  <svg

    :class="['gold-spinner', { 'is-active': active }]"

    :width="size ?? 48"

    :height="size ?? 48"

    viewBox="0 0 48 48"

    fill="none"

    xmlns="http://www.w3.org/2000/svg"

    :style="!active ? wrapperStyle : undefined"

  >

    <circle cx="24" cy="24" r="20" stroke="rgba(255,255,255,0.14)" stroke-width="3" fill="none" />

    <circle

      cx="24"

      cy="24"

      r="20"

      stroke="rgba(255,255,255,0.72)"

      stroke-width="3"

      fill="none"

      stroke-linecap="round"

      stroke-dasharray="31.4 94.2"

    />

  </svg>

</template>



<style scoped>

.gold-spinner {

  display: block;

  will-change: transform;

}



.gold-spinner.is-active {

  animation: gs-spin 0.8s linear infinite;

}



@keyframes gs-spin {

  to { transform: rotate(360deg); }

}

</style>

