<template>
  <div class="progress" />
</template>

<style scoped>
.progress {
  flex-shrink: 0;
  border: v-bind(borderSize) solid #425C97;
  border-radius: 100%;
  border-top: v-bind(borderSize) solid #ffffff;
  width: v-bind(size);
  height: v-bind(size);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<script lang="ts" setup>
const props = defineProps<{
  size: number;
}>();

const size = `${props.size * 0.25}rem`;
const borderSize = `${props.size / 3}px`;
</script>