<script setup>
defineProps({
  size: {
    type: Number,
    default: 10
  }
})
</script>

<template>
  <div class="spinner">
    <span
      class="spinner-inner"
      :style="{ width: size + 'px', height: size + 'px' }"
    ></span>
  </div>
</template>

<style lang="scss" scoped>
.spinner-inner {
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

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