Как сделать PreLoader из ZeroBlock в Tilda

We work for your joy and happiness!

+1 123 456 78 90
hello@monomo.com

Open your mind to new experiences

Getting things done is a process. It demands accountability, and has clear goals. Follow through is the most valuable asset to any organisation. Successful teams ask questions, evaluate reality, and navigate toward specific solutions.
Join us

Как сделать PreLoader из ZeroBlock в Tilda

1

Создаём ZeroBlock (вставляем в него анимированный gif)

2

Вставили код в блок Другое - Т123
Меняем ID на свой (в 2х местах)
#rec166025753 - ID Zero

Библиотека примера (постоянное отображение)


<style>
#rec166025753 {
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index: 100005;
}
</style>
<script>
$("body").css("overflow","hidden");
$(document).ready(function() {
    setTimeout(function() {
        $("#rec166025753").delay(350).fadeOut('slow'); 
        $("body").css("overflow","");
        window.dispatchEvent(new Event('resize'));
    }, 3000);
});
$(window).on('load', function () {
    $("#rec166025753").delay(350).fadeOut('slow');
    setTimeout(function() {  
    $("body").css("overflow",""); 
    window.dispatchEvent(new Event('resize'));    
    }, 400);
});
</script>

Библиотека примера (повтор через заданный интервал)


<style>
#rec350169928 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
let minutsLimit = 60; //Пауза в минутах
let ZeroPrl = $("#rec350169928");
let curentDate = new Date();
let diffDate;
if(ZeroPrl.length){
let prevTime = new Date(localStorage.getItem('beforeDate'));
if (prevTime) diffDate = +((curentDate.getTime() - prevTime.getTime())/60000).toFixed(2);
if (prevTime == null || diffDate>minutsLimit ) {
    localStorage.setItem('beforeDate', curentDate);     
    $('body').css('overflow','hidden');
    $(document).ready(function() { setTimeout(function() {hidePreloader()}, 3000)});
    $(window).on('load', function () { hidePreloader()});
}else{
    ZeroPrl.hide();
    $("body").css("overflow","");
};
function hidePreloader(){
    setTimeout(function() {
        ZeroPrl.delay(500).fadeOut('slow');
        $('body').css('overflow','');
        window.dispatchEvent(new Event('resize'));
    }, 1000);
};
};
</script>

Библиотека примера (отображать только 1 раз)


<style>
#rec342586744 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
let ZeroPrl = $("#rec342586744");
if(ZeroPrl.length){
$("body").css("overflow","hidden");
let secondTime = false;
if ( localStorage.getItem('dontLoad') == null) {
  localStorage.setItem('dontLoad', 'active');  
  secondTime=true;  
}else{
    ZeroPrl.hide();
    $("body").css("overflow","");
};
function hidePreloader(){
    setTimeout(function() {
        ZeroPrl.delay(500).fadeOut('slow');
        $("body").css("overflow","");
        window.dispatchEvent(new Event('resize'));
    }, 1000);
};
if(secondTime){
$(document).ready(function() { setTimeout(function() {hidePreloader()}, 3000)});
$(window).on('load', function () { hidePreloader()});
};
};
</script>