.spinner222 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    margin-top: 0;
}


.spinnerTop {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    margin-left: -74px;
    margin-top: 0% !important;
}

.spinner222Modal {
    margin: 0 0 0 -20px;
    width: 102.3%;
    height: 100%;
    position: relative;
    z-index: 99999;
    padding: 10px;
}

.spinner222Alert {
    margin: -15px 0 0 0px;
    width: 100%;
    position: relative;
    z-index: 99999;
    padding: 10px;
    font-size: 30px;
}


.loadingtext {
    font-size: 22vh;
    position: absolute;
    left: 34%;
    top: 25%;
}

.spinner222Alert .loadingtext {
    height: 46px;
    position: relative !important;
    display: block !important;
    width: 52%;
    margin: 0 0 0 -12% !important;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 30%;
    height: 50%;
    --g1: conic-gradient(from 90deg at left 100% top 3px, #0000 90deg, #fff 0);
    --g2: conic-gradient(from -90deg at bottom 3px right 3px, #0000 90deg, #fff 0);
    background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2);
    background-position: left, center, right;
    background-repeat: no-repeat;
    animation: l9 1s infinite;
}


@keyframes l9 {
    0% {
        background-size: 30% 50%, 30% 50%, 30% 50%
    }
    25% {
        background-size: 30% 100%, 30% 50%, 30% 50%
    }
    50% {
        background-size: 30% 50%, 30% 100%, 30% 50%
    }
    75% {
        background-size: 30% 50%, 30% 50%, 30% 100%
    }
    100% {
        background-size: 30% 50%, 30% 50%, 30% 50%
    }
}