Как сделать прелоадер из Zero-блока в Tilda: подробная инструкция

Прелоадер помогает скрыть визуальные рывки и подгрузку элементов, пока страница ещё загружается. Это особенно полезно, если на сайте есть крупные изображения, скрипты или Zero-блоки. Создать прелоадер в Tilda можно легко — достаточно одного Zero-блока и небольшого скрипта.

Если ты уже работал в Figma, то принцип похож на процесс, когда мы редактируем чужие макеты в Figma — сначала нужно правильно определить структуру, а затем аккуратно внедрить нужный функционал.

Шаг 1. Создаём Zero-блок, который станет прелоадером

1. На странице добавь новый Zero-блок.
2. Размести его самым верхним — выше шапки и любых других блоков.
3. Добавь внутрь лоадер, логотип или простую анимацию.

Чем проще анимация, тем лучше. Слишком сложные SVG-эффекты могут замедлять загрузку, и прелоадер вместо помощи будет делать только хуже. Это та же логика, что и при адаптации проектов: когда, например, мы импортируем любой сайт в Figma за пару кликов — важна лёгкость структуры, иначе проект становится перегруженным.

Шаг 2. Определи recid Zero-блока

Каждый Zero-блок имеет свой recid. Чтобы его узнать:

Zero-блок → Настройки блока → ID блока

Скопируй значение без #:

rec12345678

Этот recid потребуется для кода, чтобы браузер понимал, какой именно блок нужно скрывать после загрузки страницы.

Шаг 3. Подготавливаем код прелоадера

Ты можешь выбрать:

• скорость исчезновения прелоадера
• задержку перед скрытием
• плавность анимации

Небольшая задержка (например, 300–600 мс) позволяет анимации проиграться полностью, особенно если страница загружается мгновенно.

Шаг 4. Вставляем код в T123

1. Сразу под Zero-блоком добавь HTML-блок (T123).
2. Вставь в него код.
3. Замени recid в коде на свой.

После этого можно публиковать страницу и проверять работу.

Шаг 5. Включаем jQuery

Открой:

Настройки сайта → Ещё → Подключить jQuery

Это обязательный шаг, без него анимация fade работать не будет.

Пример рабочего кода

<!--Прелоадер из Zero-блока-->
<style>
  #rec12345678 {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      z-index: 9999999;
  }
</style>

<script>
    function preventScroll(event) {
        event.preventDefault();
    }

    document.addEventListener('wheel', preventScroll, { passive: false });
    document.addEventListener('touchmove', preventScroll, { passive: false });

    $(document).ready(function() {
      setTimeout(function() {
        $('#rec12345678').fadeOut(2000);
        document.removeEventListener('wheel', preventScroll);
        document.removeEventListener('touchmove', preventScroll);
      }, 0);
    });
</script>

Не забудь заменить rec12345678 на свой реальный recid.

Рекомендации, которые стоит учитывать

✔ Не делай прелоадер слишком длинным

1–2 секунды более чем достаточно.
Пользователь должен видеть загрузку, а не ждать её.

✔ Избегай тяжёлых SVG-анимаций

Чем легче Zero-блок, тем быстрее загрузится страница.

✔ Не ставь большую задержку

500 мс достаточно в 99% случаев.

✔ Несовместимо с Zero-слайдером на autoscale

При таком сочетании прелоадер может работать некорректно.

Важный момент про защиту проекта

Если ты создаёшь прелоадер для защищённой страницы или лендинга, будь внимателен: прелоадер может скрывать контент при перезагрузке. В таких случаях лучше дополнительно просмотреть материалы вроде как защитить свой проект в Figma, чтобы правильно формировать логику доступа и визуального отображения.

Проверяем работу прелоадера

После публикации убедись, что:

• прелоадер появляется сразу
• страница не скроллится, пока он открыт
• исчезновение плавное
• после скрытия всё работает корректно
• прелоадер одинаково стабилен на мобильных и ПК

Если всё так — установка выполнена правильно.