Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Как сделать 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

Создаём ZeroBlock и задаём ему класс uc-preloader

Вставляем в него анимированный gif
В этом примере это (gif)

Вставили код в блок Другое - Т123

Библиотека примера (показ при каждом переходе на страницу)

<script>
(function () { 
    const normalTime = 1500; //Основное время работы
    const spareTime =  3000;  //Аварийное время работы
    
    const body = document.body;
    body.style.overflow = "hidden";
    
    const preloader = document.querySelector('.uc-preloader');
    if(preloader!=null){
        document.addEventListener("DOMContentLoaded", function() {
            setTimeout(function() {
                preloader.classList.add('hide-preloader');
                body.style.overflow = "";
                window.dispatchEvent(new Event('resize'));
            }, 3000);
        });
    
        window.onload = () => {
            setTimeout(function() {  
                preloader.classList.add('hide-preloader');
                body.style.overflow = "";
                window.dispatchEvent(new Event('resize'));    
            }, 1500);
        };
    };
})();
</script>

<style>
.uc-preloader {
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index: 100005;
  /*Время анимации и задержки*/
  transition: opacity 0.75s  ease-in-out 0.35s;
}
.hide-preloader{
    opacity: 0;
    pointer-events: none;
}
</style>

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

<script>
(function () { 
    const minutsLimit = 30;  //Пауза в минутах перед следующим показом
    const normalTime = 1500; //Основное время работы
    const spareTime =  3000;  //Аварийное время работы
    
    const body = document.body;
    const preloader = document.querySelector('.uc-preloader');
    
    if(preloader!=null){
        
        const curentDate = new Date();
        let diffDate = '';
        const 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.style.overflow = "hidden";
            
            document.addEventListener("DOMContentLoaded", function() { setTimeout(function() {hidePreloader()}, 3000)});
            
            window.onload = () => { hidePreloader() };
            
        }else{
            preloader.style.display = 'none';
            body.style.overflow = "";
        };
    
        function hidePreloader(){
            setTimeout(function() {
                preloader.classList.add('hide-preloader');
                body.style.overflow = "";
                window.dispatchEvent(new Event('resize'));
            }, 1000);
        };

    };
})();
</script>


<style>
.uc-preloader {
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index: 100005;
  /*Время анимации и задержки*/
  transition: opacity 0.75s  ease-in-out 0.35s;
}
.hide-preloader{
    opacity: 0;
    pointer-events: none;
}
</style>