Прелоадер на Тильде: кастомизация

Прелоадер — это не просто технический элемент, а важный инструмент удержания внимания пользователя. Пока страница загружается, особенно если на ней есть тяжелые изображения, видео или сложные 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. Чтобы его узнать:

Нажмите на Zero Block
Откройте Настройки блока
Найдите пункт ID блока (или посмотрите в адресной строке редактора)
Скопируйте значение без решетки — например, rec12345678

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

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

Прелоадер, созданный через Zero Block, требует наличия jQuery для корректной анимации исчезновения (fade). Чтобы подключить библиотеку:

Зайдите в Настройки сайта
Перейдите в раздел Ещё
Включите опцию Подключить jQuery на страницах сайта

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

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

Сразу после Zero Block-прелоадера добавьте на страницу блок T123 (HTML). В него необходимо вставить следующий код, предварительно заменив rec12345678 на ваш реальный rec ID:

<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 блока и скопировать готовый скрипт .

Заключение

Кастомизация прелоадера на Тильде — доступный процесс. Начиная с простого Zero Block и базового скрипта, вы можете постепенно усложнять анимацию, добавлять интерактив и создавать уникальные загрузочные экраны, которые работают на имидж бренда.

Главные принципы успешного прелоадера:

Скорость — не заставляйте пользователя ждать дольше необходимого
Эстетика — дизайн должен соответствовать общему стилю сайта
Функциональность — прелоадер не должен мешать или создавать технические проблемы

Используйте готовые генераторы кода, экспериментируйте с анимациями и не бойтесь пробовать нестандартные решения. Ваш сайт на Тильде может начинаться с яркого, запоминающегося момента — и этот момент стоит того, чтобы уделить ему внимание.

Закажите бесплатную консультацию — оценю задачу и предложу оптимальное решение: от простого лендинга до полноценного интернет‑магазина на Тильде. Пишите мне через сайт https://infostudio.alexvyshtakalyuk.ru
Также заказать услугу по созданию сайта на Тильде и веб дизайну можно, написав мне на почту alex.vysh1@gmail.com; через мое сообщество ВК https://vk.com/site_uslug

Источники:

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

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