phanan/koel

<template>
  <i>
    <span />
    <span />
    <span />
  </i>
</template>

<style lang="scss" scoped>
i {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;
}

span {
  width: 3px;
  height: 100%;
  background-color: currentColor;
  border-radius: 9999px;
  animation: bounce 2.2s ease-out infinite alternate;
  transform-origin: bottom;

  &:nth-of-type(2) {
    animation-delay: -2.2s;
  }

  &:nth-of-type(3) {
    animation-delay: -3.7s;
  }
}

@keyframes bounce {
  10% {
    transform: scaleY(0.2);
  }

  40% {
    transform: scaleY(.7);
  }

  60% {
    transform: scaleY(0.5);
  }

  75% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0.4);
  }
}
</style>