Кастомный прелоадер из Zero‑блока

Позволяет создавать кастомный прелоадер для сайта с настраиваемой логикой и поддержкой Lottie‑анимаций

Модификация

Прелоадер из Zero‑блока

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

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

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте Zero-блок с прелоадером, поместите его в начало страницы и задайте ему высоту в 100% экрана
Задайте в настройках модификации ID прелоадера и параметры его поведения
Скопируйте код и вставьте его в блок T123 сразу после прелоадера

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

Скорость и тип переходов:

ID прелоадера:

Задержка:

Скрывать при повторной загрузке:

Оставьте пустым, чтобы прелоадер исчезал сразу после загрузки

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

<!--preloader.js Прелоадер из Zero-блока. https://postnikovmd.com/mods/preloader-->
<script>preloader.init(".uc-preloader")</script>

Скопировать код

Особенности

Работает с автоскейлом

Мод работает с масштабированием так же корректно, как и без него
Работает в приложениях

Прелоадер работает во встроенных браузерах Telegram и Instagram*
Поддерживает анимации

Модификация поддерживает работу Lottie, базовых и SBS-анимаций

Параметры

Функция	Описание	Триггер
preloader.init(selector, params)	Инициализирует прелоадер	Load start

Параметр	Описание	Тип	Значение по-умолчанию
selector	ID блока с прелоадером	string	-
params.delay	Задержка после загрузки страницы (в миллисекундах)	number	0
params.reset	Скрытие прелоадера при перезагрузке страницы	boolean	false
params.transition	Скорость исчезновения прелоадера (в миллисекундах)	number	300
params.easing	Функция перехода для анимации	string	'ease-in-out'
params.lottie.selector	Класс шейпа для загрузки Lottie	string	'.lottie'
params.lottie.url	Ссылка на файл с Lottie-анимацией	string	-
params.lottie.speed	Скорость Lottie-анимации	number	1
params.unload	[Экспериментально] Эффект плавного перехода при выходе со страницы	boolean	false

Чат для дизайнеров

Вместе всё получится

3 000+ человек

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Можете меня поблагодарить

Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds