body {
    --animation-duration: 7.5s;
}

.loading-text {
    animation: var(--animation-duration) linear infinite loading;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.loading-text:after {
    animation: calc(var(--animation-duration) / 2) linear infinite loadingTextContentAnimation;
    content: "Loading...";
}

@keyframes loading {
    from {
        color: black;
    }
    25% {
        color: darkblue;
    }
    50% {
        color: #36013f; /* Deep purple */
    }
    75% {
        color: #062e03; /* Diminishing Green */
    }
    to {
        color: black;
    }
}

@keyframes loadingTextContentAnimation {
    from {
        content: "Loading.";
    }
    50% {
        content: "Loading..";
    }
    to {
        content: "Loading...";
    }
}