<template>
  <div class="bouncing-squares-loader">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</template>

<script setup lang="ts">
// From Uiverse.io by mobinkakei (modified)
</script>

<style scoped>
.bouncing-squares-loader {
  width: 40px;
  height: 20px;
  position: relative;
}

.square {
  width: 3px;
  height: 3px;
  position: absolute;
  background-color: var(--claude-text-tertiary);
  left: 15%;
  transform-origin: 50%;
  animation: bounce-square .5s alternate infinite ease;
}

@keyframes bounce-square {
  0% {
    top: 20px;
    height: 2px;
    transform: scaleX(1.7);
  }

  40% {
    height: 3px;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.square:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.square:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}
</style>
