<script setup lang="ts">
interface Props {
  activeColor?: string
  width?: string
}

const { activeColor = '#fff', width = '6px' } = defineProps<Props>()
</script>

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

<style lang="scss" scoped>
.loader {
  width: v-bind('width');
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
  0% {
    background: v-bind('activeColor');
    box-shadow:
      13px 0 v-bind('activeColor'),
      -13px 0 #0002;
  }

  33% {
    background: #0002;
    box-shadow:
      13px 0 v-bind('activeColor'),
      -13px 0 #0002;
  }

  66% {
    background: #0002;
    box-shadow:
      13px 0 #0002,
      -13px 0 v-bind('activeColor');
  }

  100% {
    background: v-bind('activeColor');
    box-shadow:
      13px 0 #0002,
      -13px 0 v-bind('activeColor');
  }
}
</style>
