Советы вебмастера

Кастомизация прелоадера на Тильде: от Zero Block до сложной анимации

2026-04-28 14:06 Сайты на Tilda
Прелоадер — это не просто технический элемент, а важный инструмент удержания внимания пользователя. Пока страница загружается, особенно если на ней есть тяжелые изображения, видео или сложные Zero-блоки, прелоадер создает ощущение непрерывности и заботы о посетителе . В этой статье мы разберем все способы создания и кастомизации прелоадеров на Тильде — от простого решения через Zero Block до сложных интерактивных анимаций.

Что такое прелоадер и зачем он нужен на сайте

Прелоадер (от англ. preloader — предварительный загрузчик) — это анимация или индикатор, который отображается на экране, пока страница полностью не загрузится . Его основная задача — скрыть визуальные рывки и подгрузку элементов, которые могут происходить при открытии сайта .
Хорошо продуманный прелоадер решает несколько важных задач:
  • Удерживает внимание пользователя в первые секунды ожидания
  • Дает понять, что сайт работает, а не «завис»
  • Укрепляет брендинг благодаря использованию фирменной анимации или логотипа
  • Создает эмоциональную связь с посетителем
Особенно актуален прелоадер для сайтов с большим количеством графики, сложными анимациями или Zero-блоками — именно там время загрузки может быть заметно выше среднего .

Способы создания прелоадера на Тильде

На платформе Tilda существует несколько подходов к созданию прелоадера. Выбор конкретного способа зависит от ваших задач, технических навыков и желаемого визуального эффекта.

Стандартный прелоадер через блок T228

Самый простой и быстрый способ — использовать встроенный блок T228. Это стандартное решение, которое не требует написания кода. Блок размещается в самом верху страницы и представляет собой белый экран с цветной анимированной полосой в верхней части, отражающей уровень загрузки .
Преимущества: максимальная простота настройки, не требует технических знаний.
Недостатки: ограниченные возможности кастомизации, стандартный внешний вид.
Если вам нужен уникальный дизайн или нестандартная анимация, стоит рассмотреть более продвинутые способы.

Прелоадер из Zero Block с использованием HTML-кода

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

Кастомный прелоадер через блок T123

Для полной свободы творчества подходит блок T123 (HTML). Здесь вы можете разместить любой HTML/CSS/JS код, реализующий прелоадер с любой анимацией: эффект печатной машинки, вращающиеся элементы, процент загрузки и многое другое .

Пошаговая инструкция: создание прелоадера из Zero Block

Этот метод считается оптимальным по соотношению сложности и возможностей. Рассмотрим его подробно.

Шаг 1: Создаем Zero Block для прелоадера

Добавьте на страницу отдельный Zero Block. В настройках блока установите высоту 100% — это обеспечит полное покрытие экрана . Важное условие: этот блок должен располагаться в самом верху списка блоков, перед шапкой и любым другим контентом. Так он будет загружаться первым и сразу же появляться на экране .
Внутри блока разместите элементы, которые будут составлять ваш прелоадер. Это может быть:
  • Логотип компании
  • Анимированный текст
  • SVG-элементы
  • Простой спиннер

Шаг 2: Находим rec ID блока

Каждый Zero-блок на Тильде имеет уникальный идентификатор — rec ID. Чтобы его узнать:
  1. Нажмите на Zero Block
  2. Откройте Настройки блока
  3. Найдите пункт ID блока (или посмотрите в адресной строке редактора)
  4. Скопируйте значение без решетки — например, rec12345678
Этот идентификатор понадобится для скрипта, чтобы браузер понимал, какой именно блок нужно скрыть после полной загрузки страницы.

Шаг 3: Подключаем jQuery

Прелоадер, созданный через Zero Block, требует наличия jQuery для корректной анимации исчезновения (fade). Чтобы подключить библиотеку:
  1. Зайдите в Настройки сайта
  2. Перейдите в раздел Ещё
  3. Включите опцию Подключить jQuery на страницах сайта
Это обязательный шаг — без jQuery анимация работать не будет.

Шаг 4: Добавляем блок T123 с кодом

Сразу после Zero Block-прелоадера добавьте на страницу блок T123 (HTML). В него необходимо вставить следующий код, предварительно заменив rec12345678 на ваш реальный rec ID:
<!--Прелоадер из 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>
Что делает этот код:
  • Фиксирует блок прелоадера на весь экран с высоким z-index, чтобы он перекрывал весь контент
  • Блокирует прокрутку страницы во время показа прелоадера
  • После загрузки страницы плавно скрывает блок за 2 секунды и разблокирует прокрутку

Шаг 5: Настройка параметров

Вы можете настроить поведение прелоадера, изменив значения в коде:
  • Скорость исчезновения: fadeOut(2000) — значение в миллисекундах. 2000 = 2 секунды. Рекомендуется устанавливать 1000–2000 мс .
  • Задержка перед исчезновением: если добавить задержку (например, 300–600 мс), анимация успеет полностью проиграться, особенно если страница загружается мгновенно .

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

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

Анимация с эффектом печатной машинки

Для создания динамичного текста, который печатается на глазах у пользователя, используйте код в блоке T123 . Этот вариант отлично подходит для брендов с запоминающимся слоганом или для креативных проектов.
HTML часть:
html
<div id="preloader">
<img src="your-logo-url" id="preloader-logo" alt="Логотип">
<p id="preloader-quote"></p>
</div>
CSS часть (в настройках сайта → CSS):
css
#preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#preloader-logo {
width: 70px;
height: auto;
}

#preloader-quote {
margin-top: 40px;
text-align: center;
font-size: 12pt;
color: #d6d6d6;
font-family: 'TildaSans';
}
JavaScript часть (добавляется в блок T123):
javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var text = "ВАШ ТЕКСТ ЗДЕСЬ";
var speed = 100;
var contentLoaded = false;
function typeWriter(text, i, fnCallback) {
if (i < text.length) {
$('#preloader-quote').html(text.substring(0, i + 1));
setTimeout(function() {
typeWriter(text, i + 1, fnCallback);
}, speed);
} else {
fnCallback();
}
}
function startAnimation() {
typeWriter(text, 0, function() {
setTimeout(function() {
$('#preloader').fadeOut('slow');
}, 3000);
});
}
startAnimation();
});
</script>

Прелоадер с Lottie-анимацией

Lottie — формат легких JSON-анимаций, которые можно встраивать на сайт. Однако при использовании Lottie на Тильде могут возникать проблемы с воспроизведением, особенно в Safari . Если анимация мигает или проигрывается некорректно, попробуйте:
Проверить сам JSON-файл — возможно, проблема в немИспользовать анимацию из проверенных источников, например, с lottiefiles.comПротестировать на разных браузерах и устройствах

Интерактивный прелоадер: новый уровень вовлечения

Самый современный и нестандартный подход — создание интерактивного прелоадера, который требует действия от пользователя. Например, нужно перетащить один элемент к другому, чтобы открыть сайт .
Особенности интерактивного прелоадера:
  • Создается в Zero Block с двумя шейпами
  • Первому шейпу присваивается класс ti-key (перетаскиваемый элемент)
  • Второму шейпу — класс ti-target (цель)
  • Дополнительно можно добавить третий шейп ti-target2, который появится после успешного соединения
  • Требуется вставка специального скрипта через блок T123
Важное примечание: интерактивный прелоадер не работает с включенным Autoscale в блоках . Это ограничение стоит учитывать при планировании дизайна.
Такой подход не только скрашивает ожидание, но и вовлекает пользователя во взаимодействие с сайтом с первых секунд.

Готовые решения и генераторы кода

Если вы не хотите разбираться в коде или нужен быстрый результат, существуют готовые инструменты:
  • Nolim (https://nolim.cc) - платформа с модификациями для Тильда и встроенным AI инструментом для создания своей кастомной модификации.
  • Ворон (voron-dev.ru) — библиотека модификаций с генератором кода для прелоадера. Позволяет выбрать тип анимации (уход влево/вправо/вверх/вниз, fade out) и настроить показ (каждый раз или раз в сессию) .
  • TiCode — платформа с модификациями для Тильды, включая интерактивные прелоадеры .
  • Templatica — подробные инструкции и примеры .
Использование генераторов кода ускоряет процесс и снижает риск ошибок — достаточно подставить recid блока и скопировать готовый скрипт .

Рекомендации по оптимизации и типичные ошибки

Чтобы прелоадер выполнял свою функцию, а не вредил, следуйте простым правилам:
Не перегружайте прелоадер. Слишком сложные SVG-эффекты или тяжелая анимация могут замедлять загрузку, и тогда прелоадер вместо помощи будет делать только хуже . Чем проще анимация, тем быстрее загружается страница.
Контролируйте время показа. Оптимальная длительность — 1–2 секунды. Пользователь должен видеть загрузку, а не ждать её. 500 мс задержки достаточно в 99% случаев . Если установить слишком долгий показ, это вызовет раздражение и увеличит показатель отказов.
Проверяйте на мобильных устройствах. Мобильный трафик часто составляет большую часть посетителей. Убедитесь, что прелоадер корректно отображается и работает на экранах разных размеров. Режим Autoscale в Zero Block помогает сохранить адаптивность .
Тестируйте после публикации. Обязательно проверьте, что:
  • Прелоадер появляется при загрузке страницы
  • Анимация проигрывается плавно, без рывков
  • После исчезновения прелоадера весь контент доступен и корректно отображается
  • Прокрутка разблокируется
Распространенная ошибка: прелоадер может скрывать контент при перезагрузке, особенно на защищенных страницах или лендингах. Будьте внимательны при настройке .

Заключение

Кастомизация прелоадера на Тильде — доступный процесс. Начиная с простого Zero Block и базового скрипта, вы можете постепенно усложнять анимацию, добавлять интерактив и создавать уникальные загрузочные экраны, которые работают на имидж бренда.
Главные принципы успешного прелоадера:
  • Скорость — не заставляйте пользователя ждать дольше необходимого
  • Эстетика — дизайн должен соответствовать общему стилю сайта
  • Функциональность — прелоадер не должен мешать или создавать технические проблемы
Используйте готовые генераторы кода, экспериментируйте с анимациями и не бойтесь пробовать нестандартные решения. Ваш сайт на Тильде может начинаться с яркого, запоминающегося момента — и этот момент стоит того, чтобы уделить ему внимание.
Закажите бесплатную консультацию — оценю задачу и предложу оптимальное решение: от простого лендинга до полноценного интернет‑магазина на Тильде. Пишите мне через сайт https://infostudio.alexvyshtakalyuk.ru
Также заказать услугу по созданию сайта на Тильде и веб дизайну можно, написав мне на почту alex.vysh1@gmail.com; через мое сообщество ВК https://vk.com/site_uslug

Источники:

  1. https://templatica.pro/kak-sdelat-preloader-iz-zero-bloka-v-tilda-podrobnaya-instrukcziya/
  2. https://github.com/alt986/Codes_for_Tilda