.loader_container {
    text-align: center;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 999999;
    display: none;
    width: 100%;
    height: 100%;
}

.loader_container_inner {
    margin-top: 300px;
    margin-left: 45%;
    margin-right: 300px;
}
/* HTML: <div class="loader"></div> */
.loader {
    --w: 10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2em;
    letter-spacing: var(--w);
    width: var(--w);
    overflow: hidden;
    white-space: nowrap;
    color: #0000;
    animation: l17 2s infinite;
}

    .loader:before {
        content: "Loading...";
    }

@keyframes l17 {
    0% {
        text-shadow: calc( 0*var(--w)) -1.2em #000,calc(-1*var(--w)) -1.2em #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    4% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) -1.2em #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    8% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    12% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    16% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) -1.2em #000, calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    20% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    24% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    28% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    32% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000
    }

    36% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) -1.2em #000
    }

    40%, 60% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 0 #000
    }

    64% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 0 #000,calc(-9*var(--w)) 1.2em #000
    }

    68% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 0 #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    72% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 0 #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    76% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 0 #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    80% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 0 #000, calc(-5*var(--w)) 1.2em #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    84% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 0 #000,calc(-4*var(--w)) 1.2em #000, calc(-5*var(--w)) 1.2em #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    88% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 0 #000,calc(-3*var(--w)) 1.2em #000,calc(-4*var(--w)) 1.2em #000, calc(-5*var(--w)) 1.2em #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    92% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 0 #000,calc(-2*var(--w)) 1.2em #000,calc(-3*var(--w)) 1.2em #000,calc(-4*var(--w)) 1.2em #000, calc(-5*var(--w)) 1.2em #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    96% {
        text-shadow: calc( 0*var(--w)) 0 #000,calc(-1*var(--w)) 1.2em #000,calc(-2*var(--w)) 1.2em #000,calc(-3*var(--w)) 1.2em #000,calc(-4*var(--w)) 1.2em #000, calc(-5*var(--w)) 1.2em #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }

    100% {
        text-shadow: calc( 0*var(--w)) 1.2em #000,calc(-1*var(--w)) 1.2em #000,calc(-2*var(--w)) 1.2em #000,calc(-3*var(--w)) 1.2em #000,calc(-4*var(--w)) 1.2em #000, calc(-5*var(--w)) 1.2em #000,calc(-6*var(--w)) 1.2em #000,calc(-7*var(--w)) 1.2em #000,calc(-8*var(--w)) 1.2em #000,calc(-9*var(--w)) 1.2em #000
    }
}