Загрузка сайта...
NLM085 • Время настройки: 1 минута
Прелоадер из Zero Block на Тильде — без лишнего кода
Модификация позволяет создать собственный прелоадер из Зеро блока с возможностью настройки задержки прелоадера, а также ограничения, которое позволяет скрывать прелоадер при полной загрузке сайта.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Смотрите, как быстро установить модификацию
Инструкция
1. Создаём Зеро Блок и настраиваем свою анимацию;
2. Дальше копируем id Зеро Блока, из которого делаем прелоадер и вставляем в генератор;
3. Указываем количество секунд, которое прелоадер будет отображаться (для ПК и для мобильных устройств);
4. «При полной загрузке сайта скрывать прелоадер» — включаем эту настройку, если нужно скрывать прелоадер при загрузке сайта, а не по времени;
5. «Проигрывать только один раз при заходе на сайт» — включаем эту настройку, если нужно проигрывать прелоадер один раз при заходе на сайт;
6. Копируем сгенерированный HTML код и вставляем его в блок Т123;
ВАЖНО:
2. Дальше копируем id Зеро Блока, из которого делаем прелоадер и вставляем в генератор;
3. Указываем количество секунд, которое прелоадер будет отображаться (для ПК и для мобильных устройств);
4. «При полной загрузке сайта скрывать прелоадер» — включаем эту настройку, если нужно скрывать прелоадер при загрузке сайта, а не по времени;
5. «Проигрывать только один раз при заходе на сайт» — включаем эту настройку, если нужно проигрывать прелоадер один раз при заходе на сайт;
6. Копируем сгенерированный HTML код и вставляем его в блок Т123;
ВАЖНО:
- Код для прелоадера нужно разместить в самом верху страницы. Сам Зеро-блок с прелоадером под ним;
- Если это многостраничный сайт и в хедере есть меню, нужно поставить этот прелоадер и код выше меню. Иначе при загрузке меню будет отображаться ненадолго, будет проявляться;
- Также советуем изучить инструкцию от Тильды по оптимизации сайтов.
Сгенерируйте код для своего сайта
Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Подробнее о реферальной программе
Скопировать обычную ссылку
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Прелоадер из Zero Block — когда экран загрузки должен быть частью дизайна
Обычный SVG-прелоадер подходит для простых задач: показать спиннер, точки или короткую анимацию на фоне. Но иногда нужен полноценный экран загрузки в стиле сайта: с логотипом, текстом, фоном, анимацией, иллюстрацией или фирменной композицией.
Модификация NLM085 позволяет использовать Zero Block как прелоадер. Ты собираешь экран загрузки так же, как обычный блок в Tilda, а модификация показывает его при открытии страницы и скрывает по времени или после полной загрузки сайта.
Модификация NLM085 позволяет использовать Zero Block как прелоадер. Ты собираешь экран загрузки так же, как обычный блок в Tilda, а модификация показывает его при открытии страницы и скрывает по времени или после полной загрузки сайта.
Как подготовить прелоадер
Сначала создай отдельный Zero Block и собери в нём экран загрузки. Можно добавить логотип, короткий текст, анимацию, фон, декоративные элементы или любой другой визуал, который подходит к проекту.
После этого скопируй ID Zero Block и вставь его в генератор Nolim. Именно этот блок будет показываться пользователю во время загрузки страницы.
После этого скопируй ID Zero Block и вставь его в генератор Nolim. Именно этот блок будет показываться пользователю во время загрузки страницы.
Что можно настроить
В генераторе задаётся время показа прелоадера отдельно для ПК и мобильных устройств. Это удобно, потому что на телефоне страница может загружаться дольше, а слишком короткая анимация будет выглядеть резкой.
Также можно включить скрытие прелоадера после полной загрузки сайта. В таком режиме блок исчезает не по таймеру, а когда страница уже готова к просмотру. Ещё одна полезная настройка — проигрывать прелоадер только один раз при заходе на сайт, чтобы он не появлялся снова при каждом переходе.
Также можно включить скрытие прелоадера после полной загрузки сайта. В таком режиме блок исчезает не по таймеру, а когда страница уже готова к просмотру. Ещё одна полезная настройка — проигрывать прелоадер только один раз при заходе на сайт, чтобы он не появлялся снова при каждом переходе.
Куда вставлять код
После настройки скопируй сгенерированный HTML-код и вставь его в блок T123. Этот блок с кодом нужно поставить в самом верху страницы, а Zero Block с прелоадером разместить сразу под ним.
Если сайт многостраничный и в хедере есть меню, прелоадер и код лучше поставить выше меню. Иначе при загрузке меню может на мгновение появляться поверх страницы до того, как включится прелоадер
Если сайт многостраничный и в хедере есть меню, прелоадер и код лучше поставить выше меню. Иначе при загрузке меню может на мгновение появляться поверх страницы до того, как включится прелоадер
Где использовать такой прелоадер
Прелоадер из Zero Block подходит для промо-страниц, портфолио, презентационных сайтов, лендингов с тяжёлыми изображениями, анимациями или видео на первом экране. Он помогает закрыть момент загрузки и сделать появление сайта более аккуратным.
Такой вариант особенно уместен, когда экран загрузки должен поддерживать стиль проекта: показать логотип, фирменную графику, короткую фразу или плавную анимацию перед открытием страницы.
Такой вариант особенно уместен, когда экран загрузки должен поддерживать стиль проекта: показать логотип, фирменную графику, короткую фразу или плавную анимацию перед открытием страницы.
Что проверить после публикации
После установки проверь страницу на компьютере и телефоне. Прелоадер должен появляться сразу, не пропускать меню вперёд себя и исчезать в нужный момент. Если включено скрытие после полной загрузки сайта, убедись, что блок не остаётся на экране слишком долго.
Отдельно проверь повторные переходы по сайту. Если включена настройка «проигрывать только один раз», прелоадер должен появиться при первом заходе и не мешать пользователю дальше просматривать страницы.
Отдельно проверь повторные переходы по сайту. Если включена настройка «проигрывать только один раз», прелоадер должен появиться при первом заходе и не мешать пользователю дальше просматривать страницы.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Создай в Tilda отдельный Zero Block, оформи его как экран загрузки (логотип, анимация, фон). Затем открой nolim.cc/preloader-zero, введи ID этого блока в генераторе, задай время задержки в миллисекундах и скопируй код в блок «HTML-код». Прелоадер на Тильде будет показываться при каждом открытии страницы.
SVG-прелоадер — это анимированная иконка, которую ты создаёшь кодом. Прелоадер из Zero Block — это полноценный кастомный экран с любым дизайном: ты верстаешь его как обычный блок Tilda и можешь добавить туда что угодно — видео, анимацию, логотип с эффектами.
В генераторе Nolim есть поле «Задержка (мс)» — ты вводишь время в миллисекундах. 2000 мс = 2 секунды. Дополнительно можно настроить эффект исчезновения прелоадера (fade-out): плавное или мгновенное.
Было: сайт с тяжёлыми фото загружался 2−3 секунды, пользователь видел «прыгающий» контент — непрофессионально.
Стало: добавили прелоадер тильда из Zero Block с логотипом компании — те же 2 секунды превратились в брендированный экран загрузки. Показатель отказов снизился на 18% — пользователи ждали намеренно.
Стало: добавили прелоадер тильда из Zero Block с логотипом компании — те же 2 секунды превратились в брендированный экран загрузки. Показатель отказов снизился на 18% — пользователи ждали намеренно.