.loadingContainer {
    --diameter: 20px;
    --spacing: calc(var(--diameter) * 1.5);
    width: calc(var(--diameter) * 2.5 + var(--spacing));
}

.loadingContainerContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    bottom: 50%;
}

@keyframes dot-flashing {
    0% {
        background-color: var(--color1);
    }
    50%,
    100% {
        background-color: var(--color2);
    }
}

.loadingDots{
    --diameter: 20px;
    --spacing: calc(var(--diameter) * 1.5);
    --color1: #2E3C51;
    --color2: "#EBEEF3";
    --speed: 1s;
    position: relative;
    left: var(--spacing);
    width: var(--diameter);
    height: var(--diameter);
    border-radius: calc(var(--diameter) / 2);
    background-color: var(--color1);
    color: var(--color1);
    animation: dot-flashing var(--speed) infinite linear alternate;
    animation-delay: calc(var(--speed) / 2);

    &:before,
    &:after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }

    &:before {
        left: calc(var(--spacing) * -1);
        width: var(--diameter);
        height: var(--diameter);
        border-radius: calc(var(--diameter) / 2);
        background-color: var(--color1);
        color: var(--color1);
        animation: dot-flashing var(--speed) infinite alternate;
        animation-delay: 0s;
    }

    &:after {
        left: var(--spacing);
        width: var(--diameter);
        height: var(--diameter);
        border-radius: calc(var(--diameter) / 2);
        background-color: var(--color1);
        color: var(--color1);
        animation: dot-flashing var(--speed) infinite alternate;
        animation-delay: var(--speed);
    }
}