.loading {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
}

    .loading > div {
        width: 10px;
        height: 10px;
        background: var(--color-mustard);
        border-radius: 50%;
        margin: 3px;
    }

.ball1 {
    animation: ball1 2s infinite;
}

.ball2 {
    animation: ball2 2s infinite;
}

.ball3 {
    animation: ball3 2s infinite;
}

@keyframes ball1 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ball2 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ball3 {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.loading > label {
    color: var(--color-text);
    animation: progressText 2s infinite;
    margin-right: 10px;
    font-size: 0.7em;
}

@keyframes progressText {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}