NLM048 • Время настройки: 2 минуты
Анимированный SVG-прелоадер в Tilda без кода
С помощью нашей модификации ты можешь настроить анимированный прелоадер.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Смотрите, как быстро установить модификацию
Инструкция
1. Выбираем понравившийся прелоадер;
2. Настраиваем цвет прелоадера, фон, размер, положение и отступы;
3. Чем выше скорость анимации, тем она будет медленее;
4. Копируем сгенерированный HTML код и вставляем его в блок Т123, сам блок T123 можно вставить на конкретную страницу или в шапку сайта.
Важно:
2. Настраиваем цвет прелоадера, фон, размер, положение и отступы;
3. Чем выше скорость анимации, тем она будет медленее;
4. Копируем сгенерированный HTML код и вставляем его в блок Т123, сам блок T123 можно вставить на конкретную страницу или в шапку сайта.
Важно:
- Код для прелоадера нужно поставить в самом верху страницы, либо в HEAD сайта;
- Также советуем изучить инструкцию от Тильды по оптимизации сайтов.
- Если прелоадер отображается некорректно на странице, на которой установлена модификация NLM122, в настройках модификации NLM122 в поле "Блоки, которые не нужно увеличивать" укажите id блока с кодом модификации NLM048.
- На некоторых мобильных устройствах (чаще iOS) и в браузерах внутри приложений (например, в браузере Telegram) анимированный прелоадер может не отображаться. Вместо анимации показывается только фон, указанный в настройках.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Прелоадер в Тильде — аккуратная загрузка страницы без сложной настройки
Прелоадер нужен, когда страница загружается не мгновенно: есть тяжёлые изображения, видео, анимации или сторонние скрипты. Вместо пустого экрана пользователь видит понятный знак загрузки и понимает, что сайт открывается.
Модификация NLM048 добавляет на сайт Tilda анимированный SVG-прелоадер. Можно выбрать готовый вариант, настроить цвет, фон, размер и время показа, а затем вставить готовый код на страницу.
Модификация NLM048 добавляет на сайт Tilda анимированный SVG-прелоадер. Можно выбрать готовый вариант, настроить цвет, фон, размер и время показа, а затем вставить готовый код на страницу.
Как настроить прелоадер
Сначала выбери один из вариантов прелоадера в генераторе. Затем задай цвет анимации, цвет фона, размер и время показа в секундах. Этих настроек достаточно, чтобы сделать простой экран загрузки без ручной верстки.
Фон лучше подбирать под стиль сайта. Для светлого лендинга подойдёт белый или мягкий фирменный оттенок, для тёмной страницы — тёмный фон с контрастной анимацией. Размер прелоадера тоже стоит проверять на разных экранах: слишком маленький будет теряться, слишком крупный начнёт мешать.
Фон лучше подбирать под стиль сайта. Для светлого лендинга подойдёт белый или мягкий фирменный оттенок, для тёмной страницы — тёмный фон с контрастной анимацией. Размер прелоадера тоже стоит проверять на разных экранах: слишком маленький будет теряться, слишком крупный начнёт мешать.
Куда вставлять код
После настройки скопируй HTML-код из генератора и вставь его в блок T123. Сам блок лучше поставить в самом верху страницы, чтобы прелоадер появлялся сразу, а не после загрузки части контента.
Если прелоадер нужен на всём сайте, код можно добавить в HEAD сайта. Так не придётся вставлять его на каждую страницу отдельно. После публикации проверь несколько страниц, чтобы убедиться, что прелоадер появляется одинаково и не конфликтует с другими блоками.
Если прелоадер нужен на всём сайте, код можно добавить в HEAD сайта. Так не придётся вставлять его на каждую страницу отдельно. После публикации проверь несколько страниц, чтобы убедиться, что прелоадер появляется одинаково и не конфликтует с другими блоками.
Где использовать прелоадер
Прелоадер особенно полезен на промо-страницах, лендингах с видео, портфолио, сайтах с крупными изображениями, презентационных проектах и страницах, где первый экран должен открываться аккуратно.
Если страница лёгкая и загружается быстро, прелоадер может быть лишним. Лучше использовать его там, где он действительно закрывает момент ожидания, а не просто добавляет ещё один декоративный эффект.
Если страница лёгкая и загружается быстро, прелоадер может быть лишним. Лучше использовать его там, где он действительно закрывает момент ожидания, а не просто добавляет ещё один декоративный эффект.
Что проверить после публикации
Проверь страницу на компьютере, телефоне и в разных браузерах. На некоторых мобильных устройствах, чаще на iOS, а также во встроенных браузерах приложений вроде Telegram анимированный прелоадер может не отображаться. В таком случае пользователь увидит только фон, заданный в настройках.
Если на странице стоит модификация NLM122 для автоскейла, и прелоадер отображается некорректно, добавь ID блока с кодом NLM048 в поле «Блоки, которые не нужно увеличивать» в настройках NLM122. Так автоскейл не будет вмешиваться в работу прелоадера.
Если на странице стоит модификация NLM122 для автоскейла, и прелоадер отображается некорректно, добавь ID блока с кодом NLM048 в поле «Блоки, которые не нужно увеличивать» в настройках NLM122. Так автоскейл не будет вмешиваться в работу прелоадера.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Используй модификацию NLM048 от Nolim. В генераторе на nolim.cc/preloader выбираешь тип SVG-анимации, цвет, размер и скорость. Скопируй код и вставь в блок «HTML-код». Прелоадер будет показываться при каждой загрузке.
SVG-прелоадер — это лёгкая анимированная иконка (спиннер, пульс, точки), которая создаётся кодом без дополнительных блоков. Прелоадер из Zero Block — это полноценный дизайнерский экран. SVG подходит, когда нужна скорость установки и минимализм.
Нет. SVG-прелоадер — это несколько килобайт встроенного кода. Он не загружает внешние ресурсы и не блокирует рендеринг страницы. Сам прелоадер показывается поверх уже начавшейся загрузки страницы — задержка восприятия, а не реальная задержка загрузки.
Было: лендинг с видео-фоном грузился 2.5 секунды — пользователи видели белый экран и уходили. Отказы составляли 68%.
Стало: после установки SVG-прелоадера через Nolim белый экран исчез — теперь показывается анимированный логотип. Отказы снизились до 41%, потому что пользователи видели, что страница загружается.
Стало: после установки SVG-прелоадера через Nolim белый экран исчез — теперь показывается анимированный логотип. Отказы снизились до 41%, потому что пользователи видели, что страница загружается.