Прелоадер с Lottie в Tilda: своя анимация перед открытием страницы

Если у проекта уже есть короткая Lottie-анимация, её можно показать перед основным содержимым сайта. Само движение берётся из файла, а фон, положение, проценты и уход заставки задаются в конструкторе.

Это отдельный прелоадер, а не плеер внутри Zero Block. Разберём прямой адрес JSON, режим ожидания и проверку на телефоне. Проценты здесь не показывают точный объём скачанных данных.

Замените демонстрационную ссылку прямым адресом Lottie JSON. Убедитесь, что браузер может открыть файл без входа в чужой аккаунт и анимация появилась в превью.

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

Цвета, формы и сюжет вашей анимации находятся внутри Lottie. Настройка цвета спиннера относится к кольцу-заглушке и не перекрашивает загруженный файл.

До подключения сравните анимацию с фоном заставки. Если в ней есть очень светлые детали, они могут исчезнуть на белом; маленький сложный знак — потеряться на телефоне. Для вступления лучше короткое понятное движение, которое не требует долго рассматривать мелкие элементы. После правки исходного файла проверьте, что на сайте открывается его актуальная доступная версия.

Задайте размер, положение и отступы анимации. Затем отдельно настройте индикатор процентов: позицию, размеры, цвета и суффикс. Оба элемента должны помещаться на узком экране и не закрывать друг друга.

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

В автоматическом режиме заставка ориентируется на готовность страницы. Проценты условно приближаются к 90 и завершаются после неё. Это визуальная оценка ожидания, а не подсчёт загруженных байтов.

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

Заставка может уйти сдвигом в одну из четырёх сторон или затуханием. Подберите вариант, который согласуется с первым экраном. Для самого прелоадера не нужен отдельный HTML-плеер в Zero Block.

Добавьте готовый код в T123 в начале страницы и опубликуйте её. Положение выбирается в одном конструкторе, поэтому ради другой позиции не нужно ставить вторую копию. Если Lottie-файл не загрузился или ссылка очищена, используется кольцевой спиннер. Проверьте запасной вариант на тестовой копии, не ломая рабочую ссылку посетителям.

Откройте страницу на компьютере и телефоне. Дождитесь полного ухода прелоадера, затем нажмите на главное действие и прокрутите страницу.

• Загружается нужная Lottie-анимация по прямому JSON-адресу.
• Движение и проценты не перекрываются на телефоне.
• Выход полностью открывает страницу.
• Максимальное ожидание соответствует вашему сценарию.
• Кнопки и прокрутка доступны после завершения.

Для Lottie внутри самой страницы и управления по скроллу используйте отдельный конструктор: эта заставка решает другую задачу.

Читайте также: Lottie-анимация в Tilda: как добавить в Zero Block и настроить запуск · Прелоадер со счётчиком в Tilda: цифры и уходящая штора.