Прелоадер на сайт на Тильде

<!-- Прелоадер--> 
<div class="nl_reploader_father">
    <div class="nl_preloader">
        <div class="loader">Loading...</div>
    </div>
    <div class="textloader">
        <!-- Тут меняем текст прелоадера--> 
        <p>Проводим проверку вашего соединения. Выключите VPN для ускорения загрузки сайта.</p>
    </div>
</div>


<script>
$(document).ready(function(){ 
    setTimeout(function(){
        $('.nl_reploader_father').fadeOut(); 
        }, 2000); 
});
</script>


<style>
.textloader {
    color: #000;
    font-size: 18px;
    font-family: Arial;
    text-align: center;
    position: absolute;
    bottom: 10%; /* Позиционируем текст ближе к низу */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100006;
}


.nl_preloader{
    position:absolute;
    top:50%;
    left:50%;
    margin-right:-50%;
    transform:translate(-50%,-50%)
}
.nl_reploader_father{
    display:block;
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:100005;
    width:100%;
    height:100%;
    background:#ffffff;
    z-index:9999999
} 
.loader,.loader:after,.loader:before{
    background:#1951e0!important;
    -webkit-animation:load1 1s infinite ease-in-out;
    animation:load1 1s infinite ease-in-out;
    width:1em;
    height:4em
}
.loader{
    color:#1951e0!important;
    text-indent:-9999em;
    margin:88px auto;
    position:relative;
    font-size:11px;
    -webkit-transform:translateZ(0);
    -ms-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-animation-delay:-.16s;
    animation-delay:-.16s
}
.loader:after,.loader:before{
    position:absolute;
    top:0;
    content:''
}
.loader:before{
    left:-1.5em;
    -webkit-animation-delay:-.32s;
    animation-delay:-.32s
}
.loader:after{
    left:1.5em
}
@-webkit-keyframes load1{
    0%,100%,80%{box-shadow:0 0;height:4em}
    40%{box-shadow:0 -2em;height:5em}
}
@keyframes load1{
    0%,100%,80%{box-shadow:0 0;height:4em}
    40%{box-shadow:0 -2em;height:5em}
}
</style>