.app-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #272c33;
    text-align: center;
    z-index: 10000;
    transition: opacity .8s ease-out;
}
/* .app-loading h1 {
    position: absolute;
    top: 40vh;
    left: 0;
    right: 0;
    font-family: "courier", monospace;
    font-size: 28px;
    font-weight: 500;
    color: #EEE;
    margin: 0;
    padding: 0;
    line-height: 2;
    transition: opacity .8s ease-out;
} */

.app-loading h1 {
    position: absolute;
    top: 40vh;
    left: 0;
    right: 0;
    font-family: "Tahoma";
    font-size: 28px;
    font-weight: 500;
    color: #EEE;
    margin: 0;
    padding: 0;
    line-height: 2;
    transition: opacity .8s ease-out;
}
.app-loading h1 .loading-text span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}
.app-loading h1 .loading-text span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}
.app-loading h1 .loading-text span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}
    
@keyframes blink {
    /**
        * At the start of the animation the dot
        * has an opacity of .2
        */
    0% {
        opacity: .2;
    }
    /**
        * At 20% the dot is fully visible and
        * then fades out slowly
        */
    20% {
        opacity: 1;
    }
    /**
        * Until it reaches an opacity of .2 and
        * the animation can start again
        */
    100% {
        opacity: .2;
    }
}