.loader {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 4px;
    div {
        border-radius: 2px;
        width: 8px;
        height: 8px;
        background: var(--color-f1-1);
        animation: loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    }
    div:nth-child(1) {
        animation-delay: 0;
    }
    div:nth-child(2) {
        animation-delay: 0.08s;
    }
    div:nth-child(3) {
        animation-delay: 0.16s;
    }
  }

  @keyframes loader {
    10% {
      height: 8px;
    }
    30% {
      height: 32px;
    }
    40% {
      height: 8px;
    }
}