src/components/spinner/style.module.scss

.spinnerSquare {
  --height: 40px;
  --width: 50px;
  --small-height: calc(var(--height) / 1.5);

  display: flex;
  flex-direction: row;
  width: var(--width);
  height: var(--height);

  > div {
    width: calc(var(--width) / 5);
    height: var(--small-height);
    margin: auto auto;
    border-radius: 2px;
  }
}

.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: var(--small-height);
    background-color: var(--text-secondary);
  }
  20% {
    height: var(--small-height);
  }
  40% {
    height: var(--height);
    background-color: var(--text-hover-secondary);
  }
  80% {
    height: var(--small-height);
  }
  100% {
    height: var(--small-height);
    background-color: var(--text-secondary);
  }
}