NLM048 • Время настройки: 2 минуты
Анимированный SVG-прелоадер в Tilda без кода
С помощью нашей модификации ты можешь настроить анимированный прелоадер.
Смотрите, как быстро установить модификацию
Инструкция
1. Выбираем понравившийся прелоадер;
2. Настраиваем цвет прелоадера, фон, размер, положение и отступы;
3. Чем выше скорость анимации, тем она будет медленее;
4. Копируем сгенерированный HTML код и вставляем его в блок Т123, сам блок T123 можно вставить на конкретную страницу или в шапку сайта.
Важно:
2. Настраиваем цвет прелоадера, фон, размер, положение и отступы;
3. Чем выше скорость анимации, тем она будет медленее;
4. Копируем сгенерированный HTML код и вставляем его в блок Т123, сам блок T123 можно вставить на конкретную страницу или в шапку сайта.
Важно:
- Код для прелоадера нужно поставить в самом верху страницы, либо в HEAD сайта;
- Также советуем изучить инструкцию от Тильды по оптимизации сайтов.
- Если прелоадер отображается некорректно на странице, на которой установлена модификация NLM122, в настройках модификации NLM122 в поле "Блоки, которые не нужно увеличивать" укажите id блока с кодом модификации NLM048.
- На некоторых мобильных устройствах (чаще iOS) и в браузерах внутри приложений (например, в браузере Telegram) анимированный прелоадер может не отображаться. Вместо анимации показывается только фон, указанный в настройках.
Сгенерируйте код для своего сайта
Код готов и доступен по подписке Нолим
Уже есть подписка? Войти
Добавляйте на сайт слайдеры, аккордеоны, вкладки и скроллы — 200+ готовых решений в одной подписке
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 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%, потому что пользователи видели, что страница загружается.