#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    color: #e4e4e4;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: opacity 0.5s ease-out;
    /* font-family inherited from body to respect theme */
}

#loading-overlay::after {
    content: "...";
    animation: dots 1.5s infinite;
    display: inline-block;
    width: 20px;
    text-align: left;
}

@keyframes dots {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }
}