← Назад

Виджеты

Сайт

Создание прелоадера
для сайта

Сложность ∙ Легко

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

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

Проверить работу прелоадера можно на опубликованном сайте или в режиме предпросмотра.

Важный момент:
Чтобы все изменения появились на вашем сайте, необходимо нажать на кнопку "Опубликовать" в правом верхнем углу редактора:

Важный момент:
Чтобы все изменения появились
на вашем сайте, необходимо нажать
на кнопку "Опубликовать" в правом верхнем углу редактора:

Добавление в редактор

• Зайдите в редактор нужной страницы сайта, нажмите на кнопку "Добавить секцию":

Во вкладке "Динамические" выберите категорию "Виджеты" и шаблон "Прелоадер":

Секция появится в редакторе:

Отображение добавленного прелоадера в редактор сайта mottor

Настройка секции

• Нажмите на кнопку шестеренки в меню секции, чтобы открыть ее настройки:

• Нажмите на кнопку шестеренки
в меню секции, чтобы открыть ее настройки:

Справа откроется меню настройки секции, в нем есть 3 вкладки параметров:

• Тип индикатора

Здесь можно выбрать один из доступных типов индикатора загрузки:

Изменение типа индикатора прелоадера в mottor

• Дизайн индикатора

У каждого типа индикатора в данной вкладке отображаются свои варианты дизайна. Также именно здесь можно указать цвет индикатора.

Обратите внимание!
При использовании индикатора-иконки опция "Цвет" применяется только к SVG-картинкам, выбранным из нашей галереи картинок.

• Настройки индикатора

Обратите внимание!
При использовании индикатора-иконки опция "Цвет" применяется только
к SVG-картинкам, выбранным из нашей галереи картинок.

• Настройки индикатора

Изменение размера, скорости прелоадера сайта

Здесь вы сможете:

1. Задать цвет фона для экрана прелоадера:

2. Установить размер индикатора. Можно выбрать один из трех готовых вариантов или задать свой размер в пикселях.

3. Установить скорость анимации индикатора. Можно выбрать один из трех готовых вариантов, либо указать свое значение длительности цикла анимации в секундах.

4. Добавить логотип компании или счетчик загрузки страницы в процентах:

2. Установить размер индикатора. Можно выбрать один из трех готовых вариантов или задать свой размер
в пикселях.

3. Установить скорость анимации индикатора. Можно выбрать один из трех готовых вариантов, либо указать свое значение длительности цикла анимации в секундах.

4. Добавить логотип компании или счетчик загрузки страницы в процентах:

Добавление логотипа в прелоадер сайта в mottor

Обратите внимание!
В нижней части окна настроек секции находится кнопка "Сбросить настройки". Она сбрасывает все измененные параметры в секции и откатывает их до состояния, когда секция была только добавлена в редактор.

Обратите внимание!
В нижней части окна настроек секции находится кнопка "Сбросить настройки". Она сбрасывает все измененные параметры в секции и откатывает их
до состояния, когда секция была только добавлена в редактор.

Как сбросить настройки виджета "Прелоадер"

Часто задаваемые вопросы

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

Прелоадер срабатывает автоматически, он появится при загрузке страницы
на 1-2 секунды на любом сайте даже при условии быстрого интернет-соединения.

Прелоадер срабатывает автоматически, он появится при загрузке страницы на 1-2 секунды на любом сайте даже при условии быстрого интернет-соединения.

Такое происходит, если включить в настройках сайта, категория "Оптимизация", вот эту опцию:

Такое происходит, если включить
в настройках сайта, категория "Оптимизация", вот эту опцию:

Настройки оптимизации прелоадера на сайте

И при этом разместить секцию прелоадера в редакторах страниц сайта так, чтобы она не попадала в число предзагружаемых стилей.

Например, вы установили значение для "предзагрузки" на 3, а прелоадер размещен секцией номер 15 в редакторе. Тогда эти два функционала будут себя взаимоисключать.

Есть 2 варианта решения:

• Отключить опцию "Предзагрузка стилей и картинок первого экрана"
в настройках оптимизации сайта;
• Переместить секцию "Прелоадер" в самом начале редактора, чтобы она учитывалась в предзагрузке.

Итоги

Итак, в этой статье мы узнали, как создать и настроить прелоадер для сайта.

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Создать сайт с ИИ бесплатно

Не забудьте протестировать все возможности mottor прямо сейчас

Конструктор сайтов, чат-ботов, автоворонок, мобильных приложений

Быстрый старт:

Премиум поддержка

Полезные материалы

Интеграции

Технологии

Шаблоны сайтов

Тарифы

Импорт из Figma

Сделано на mottor

Партнеры

Продукты:

Сайты + лендинги

Интернет-магазины

Квизы

Чат-боты

Автоворонки

Приложение

AI-агенты (n8n)

Партнерская программа

WhiteLabel

О нас:

О компании

Тур по сервису

Вакансии

Отзывы

Контакты

Шаблоны:

Создание прелоадера для сайта

Добавление в редактор

Настройка секции

Итоги

Не забудьте протестировать все возможности mottor прямо сейчас

Создание прелоадера
для сайта