Основная функция виджета:
Прелоадеры выполняют важную задачу — они развлекают посетителя сайта, пока он ждёт загрузку страницы. Чем больше контента на странице, тем медленнее она загружается и тем дольше будет показываться прелоадер.
Прелоадеры выполняют важную задачу — они развлекают посетителя сайта, пока он ждёт загрузку страницы. Чем больше контента на странице, тем медленнее она загружается и тем дольше будет показываться прелоадер.
Вид прелоадера по умолчанию:
Как это работает:
Чтобы прелоадер показывался на сайте, добавьте секцию с ним в любое место на сайте, например, после самой последней секции, чтобы он не отвлекал вас.
Прелоадер будет виден только в режиме предпросмотра или на запущенном сайте.
Обратите внимание, что если ваша страница очень лёгкая и быстро грузится, прелоадер может показываться всего долю секунды.
Чтобы прелоадер показывался на сайте, добавьте секцию с ним в любое место на сайте, например, после самой последней секции, чтобы он не отвлекал вас.
Прелоадер будет виден только в режиме предпросмотра или на запущенном сайте.
Обратите внимание, что если ваша страница очень лёгкая и быстро грузится, прелоадер может показываться всего долю секунды.
Вид прелоадера на запущенном сайте:
Тип индикатора:
У каждого прелоадера настраивается цвет/a, размер и скорость анимации.
Варианты дизайна поделены на 3 группы:
У каждого прелоадера настраивается цвет/a, размер и скорость анимации.
Варианты дизайна поделены на 3 группы:
- круговые
- горизонтальные
- и блочные
Круговые индикаторы:
Блочные индикаторы
Горизонтальные индикаторы:
Своя картинка прелоадера:
Помимо 3х основных типов индикатора, есть отдельный тип — ваша собственная картинка. Вы можете загрузить свою картинку, которая будет заполняться из чёрно-белого состояния в цветное.
Если вы используете svg-изображение из нашей библиотеки, то его цвет можно будет поменять в настройках индикатора.
В качестве примера возьмём картинку с ракетой, во время загрузки страницы, эта картинка заполнится цветом слева направо. Ниже показан вид прелоадера, когда страница прогрузилась на 50%.
Помимо 3х основных типов индикатора, есть отдельный тип — ваша собственная картинка. Вы можете загрузить свою картинку, которая будет заполняться из чёрно-белого состояния в цветное.
Если вы используете svg-изображение из нашей библиотеки, то его цвет можно будет поменять в настройках индикатора.
В качестве примера возьмём картинку с ракетой, во время загрузки страницы, эта картинка заполнится цветом слева направо. Ниже показан вид прелоадера, когда страница прогрузилась на 50%.
Пример прелоадера, когда страница прогрузилась на 50%:
Настройки индикатора:
В этом разделе вы можете настроить:
• цвет фона, показывающийся вместе с прелоадером
• ширину и высоту индикатора (настройка доступна только для пользовательских картинок)
• размер (s-m-l или свой)
• скорость анимации (1x-2x-3x или указать своё значение)
В этом разделе вы можете настроить:
• цвет фона, показывающийся вместе с прелоадером
• ширину и высоту индикатора (настройка доступна только для пользовательских картинок)
• размер (s-m-l или свой)
• скорость анимации (1x-2x-3x или указать своё значение)
Настройки логотипа:
Эта настройка находится в разделе "Настройки индикатора".
Настройте, что будет показываться под картинкой прелоадера: ваш лого или счётчик, показывающий сколько процентов осталось ждать загрузку сайта.
Эта настройка находится в разделе "Настройки индикатора".
Настройте, что будет показываться под картинкой прелоадера: ваш лого или счётчик, показывающий сколько процентов осталось ждать загрузку сайта.
Пример прелоадера с логотипом:
Пример прелоадера со счётчиком:
блок