#loading { display: none; position: fixed; right: 0; top: -20px; width: calc(100% - 250px); height: calc(100% + 20px); background-color: #afafaf8a; z-index: 100000; opacity: 1; text-align: center; }

#loading img{ height: 45px; opacity: 1; webkit-animation: revolving 2s 0s infinite; animation: revolving 1s 0.4s infinite; }

#loading > div, [id^=loading_] > div { top: 50%; }

#loading span.span-loading, [id^=loading_] > span.span-loading { font-size: 30px; vertical-align: middle; }

.loading-progress { position: relative; top: 52% !important; width: 100%; }

.loading-progress-bar { width: 200px; height: 2px; position: absolute; background: linear-gradient(90deg, purple 0%, white 0%); left: 50%; transform: translateX(-50%); }

.loading-progress-text { color: white; position: absolute; left: 50%; transform: translateX(-50%); }

[id^=loading_] { display: none; position: absolute; right: 0; top: 0px; width: 100%; height: 100%; background-color: #afafaf8a; z-index: 100000; opacity: 1; text-align: center; }

[id^=loading_] img { height: 43px; opacity: 1; margin: 0 3px; webkit-animation: revolving 2s 0s infinite; animation: revolving 1s 0.4s infinite; }

.wavy { position: relative; -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2)); display:flex; justify-content:center; }

.wavy span { position: relative; display: inline-block; color: #fff; animation: animate 1s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); font-size:30px; margin:0 3px;}

@keyframes revolving {
    0, 50% { -webkit-transform: perspective(700px) rotate(360deg); }

    70.5% { -webkit-transform: perspective(700px) rotate(360deg); }

    100% { -webkit-transform: perspective(700px) rotate(360deg); }
}

@keyframes animate {
    0% { transform: translateY(0px) }

    20% { transform: translateY(-24px) }

    40%, 100% { transform: translateY(0px) }
}

@media screen and (max-width: 1024px) {
    
    #loading,[id^=loading_] { display: none; position: fixed; right: 0; width: 100%; background-color: #afafaf8a; z-index: 100000; opacity: 1; text-align: center; }

    #loading img, [id^=loading_] img { height: 45px; opacity: 1; webkit-animation: revolving 2s 0s infinite; animation: revolving 1s 0.4s infinite; }

    #loading > div, [id^=loading_] > div { top: 50%; }

    #loading span.span-loading, [id^=loading_] > span.span-loading { font-size: 30px; vertical-align: middle; }

}