src/components/spinner/style.module.scss

.spinnerSquare {
  display: flex;
  flex-direction: row;
  width: 90px;
  height: 120px;

  > div {
    width: 17px;
    height: 80px;
    margin: auto auto;
    border-radius: 4px;
  }
}

.square1 {
  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square2 {
  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square3 {
  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

@keyframes square-anim {
  0% {
    height: 80px;
    background-color: var(--text-secondary);
  }
  20% {
    height: 80px;
  }
  40% {
    height: 120px;
    background-color: var(--text-hover-secondary);
  }
  80% {
    height: 80px;
  }
  100% {
    height: 80px;
    background-color: var(--text-secondary);
  }
}