.loader-container {
    position: absolute;
    z-index: -99;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader {
    width: 5px;
    height: 24px;
    background: var(--bs-theme, black);
    position: relative;
    animation: loader-bars 1s ease-in-out infinite;
    animation-delay: 0.4s;
    margin: -28px auto 0 auto;
}

.loader:after,
.loader:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 24px;
    background: var(--bs-theme, black);
    animation: loader-bars 1s ease-in-out infinite;
}
.loader:before {
    right: 9px;
    animation-delay: 0.2s;
}
.loader:after {
    left: 9px;
    animation-delay: 0.6s;
}

@keyframes loader-bars {
    0%,
    100% {
        box-shadow:
            0 0 0 var(--bs-theme, black),
            0 0 0 var(--bs-theme, black);
    }
    50% {
        box-shadow:
            0 -4px 0 var(--bs-theme, black),
            0 4px 0 var(--bs-theme, black);
    }
}