Как сделать любой Zero Block прелоадером в Tilda

2025-11-23 14:06 Zero Block Прелоадер

Инструкция

Данная модификация позволяет создать уникальный экран загрузки (прелоадер) с использованием Zero Block. Пока сайт загружается, пользователь видит вашу анимацию, логотип или приветствие на весь экран. После загрузки прелоадер плавно исчезает.

1. Создайте Zero Block на отдельной странице, которую вы используете как Header.
2. В настройках этого Zero Block установите высоту (Height) 100%
3. Разместите внутри любую анимацию, логотип или контент, который должен видеть пользователь при загрузке.
4. Присвойте этому Zero Block класс uc-preloader. Для этого нажмите «Настройки» → «CSS Class Name» и впишите туда uc-preloader.
5. Добавьте блок T123 (HTML-код) в хедер (там же где расположен ваш Zero-прелоадер) и вставьте в него приведённый ниже код.
6. Опубликуйте все страницы сайта, чтобы изменения вступили в силу.

Настройки модификации:

Чтобы изменить минимальное время показа прелоадера, найдите в скрипте строку const minVisibleTime = 2000; и поменяйте 2000 (это 2 секунды) на нужное количество миллисекунд.

Чтобы изменить скорость исчезновения, отредактируйте значения в блоке <style> в строке transition: opacity 0.75s ease-in-out 0.35s;.

<!-- Скрипт для создания прелоадера из любого Zero Block на Tilda с сайта bulgkate.ru -->

<script>
(function () { 
  const minVisibleTime = 2000;
  const body = document.body;
  const preloader = document.querySelector('.uc-preloader');
  const start = Date.now();

  if (preloader) {
    body.style.overflow = "hidden";

    const hide = () => {
      const elapsed = Date.now() - start;
      setTimeout(() => {
        preloader.classList.add('hide-preloader');
        body.style.overflow = "";
        window.dispatchEvent(new Event('resize'));
      }, Math.max(0, minVisibleTime - elapsed));
    };

    document.addEventListener("DOMContentLoaded", hide);
    window.addEventListener("load", hide);
  }
})();
</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>