.content-loading {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0,0.7);
    top:0px;
    display:none;
}

    .content-loading > .loading {
        font: 26px/1.5 Monospace;
        color: #10c4b5;
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.loading > span {
    -webkit-animation: flip 2s infinite;
    animation: flip 2s infinite;
    display: inline-block;
    -webkit-transform-origin: 50% 50% -10px;
    transform-origin: 50% 50% -10px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    .loading > span:nth-child(1) {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .loading > span:nth-child(2) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .loading > span:nth-child(3) {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .loading > span:nth-child(4) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .loading > span:nth-child(5) {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .loading > span:nth-child(6) {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .loading > span:nth-child(7) {
        -webkit-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }

@-webkit-keyframes flip {
    to {
        -webkit-transform: rotateX(1turn);
        transform: rotateX(1turn);
    }
}

@keyframes flip {
    to {
        -webkit-transform: rotateX(1turn);
        transform: rotateX(1turn);
    }
}