Модифицированный прелоадер на сайт на Тильде

Loading...

Проводим проверку вашего соединения. Выключите VPN для ускорения загрузки сайта.

Я тут подумал, просто прелоадер - скучно. Многие гос.сайты и крупные сервисы уже давно используют якобы проверку его браузера / интернет соединения и т.п, как мне кажется именно для удержания посетителя при долгой загрузки сайта. И почему бы не перенять их опыт себе?

У нас есть готовый шаблон прелоадера, надо только добавить текст, объясняющий, что сейчас происходит. Так что ловите код обновленного прелоадера на сайт на Тильде, который показывает сообщение, пока грузится основной контент сайта.

Инструкция:
  1. Добавляем код в блок .t123 (лучше его расположить в начале страницы)
  2. По желанию меняем текст в прелоадере

<!-- Прелоадер--> 
<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>
P.s.: Вы можете поменять цвет прелоадера и шрфит текста, все на ваше усмотрение

А тут есть необычные и залипательные прелоадеры. Их всего 20шт, но зато каких!

Кстати, прелоадер - одна из фишек, которыми пользуются SEO-спецы для удержания посетителя на сайте и сокращения % отказов. Это положительно влияет на ранжирование сайта в поиске.
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda