<script setup lang="ts"></script>

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

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

@keyframes l5 {
  0% {
    background: #000dff;
    box-shadow:
      13px 0 #000dff,
      -13px 0 #0002;
  }

  33% {
    background: #0002;
    box-shadow:
      13px 0 #000dff,
      -13px 0 #0002;
  }

  66% {
    background: #0002;
    box-shadow:
      13px 0 #0002,
      -13px 0 #000dff;
  }

  100% {
    background: #000dff;
    box-shadow:
      13px 0 #0002,
      -13px 0 #000dff;
  }
}
</style>
