Произошла ошибка...
Для генерации кода необходимо внести данные во все обязательные поля.
Код успешно скопирован!
Как вставить код в Taptop?
Откройте настройки страницы в Taptop
В блоке «Перед тегом body» вставьте сгенерированный код
Опубликуйте страницу
Проверьте работу расширения на опубликованном сайте
Расширение не работает? Прочтите раздел «Решение возможных проблем» в документации, перепроверьте все шаги инструкции или обратитесь в поддержку.
Прелоудер
Расширение добавляет на сайт анимированный индикатор загрузки, который отображается, пока загружается основное содержимое страницы. Лоадер показывает пользователю, что сайт находится в процессе загрузки, помогая улучшить пользовательский опыт. Это особенно полезно для страниц с большим количеством контента или при медленном интернет-соединении: вместо «белого экрана» пользователь видит аккуратную анимацию и понимает, что страница работает.
Uprock
Автор
Бесплатно
Цена
10 мая 2025
Обновлено
Для подключения расширения необходим компьютер
Вы просматриваете страницу с мобильного устройства. Чтобы подключить расширение к Taptop, пожалуйста, откройте эту страницу на компьютере и следуйте инструкции.
Как работает расширение
После подключения расширения на страницу автоматически добавляется оверлей (наложенный поверх страницы цветовой фон) с анимацией загрузки. Он появляется сразу при открытии страницы и исчезает после полной загрузки контента.
Вы можете настроить внешний вид анимации (спиннер, точки, полосы или собственный CSS), цвета и тайминги — когда и как быстро скрывать лоадер.
Как работать с инструкцией
Для подключения расширения нужно:
В генераторе (в правой части страницы) — настроить внешний вид и поведение лоадера и сгенерировать код.
На платформе Taptop — вставить полученный код в настройках страницы.
Установка расширения на сайт
Шаг 1: Настройте параметры в генераторе и сгенерируйте код
Перейдите к генератору (в правой части страницы с данной инструкцией). В нём вы можете настроить внешний вид и поведение лоадера.
1 . Настройте Внешний вид.
Тип анимации — выберите один из вариантов:
Spinner — вращающийся круг
Dots — мигающие точки
Bars — полоски загрузки
Custom CSS — если хотите использовать собственную анимацию (подробнее о настройке ниже)
Цвет фона оверлея — цвет затемнения, которое накрывает страницу во время загрузки.
Цвет анимации — основной цвет элементов анимации.
2 . Настройте Тайминги.
Минимальная длительность показа — сколько времени лоадер должен быть виден как минимум, даже если страница загрузилась быстро. Это помогает избежать резкого «мигания» анимации.
Пауза перед скрытием — дополнительная задержка после полной загрузки страницы. Это дает время на отрисовку всех элементов (например, шрифтов или изображений), чтобы избежать “прыжка” макета.
Плавность исчезновения — время, за которое лоадер плавно исчезает с использованием анимации fade-out. Это влияет на визуальную "мягкость" ухода лоадера.
💡 Результат выбранных настроек сразу отображаются в блоке “Предпросмотр”.
3 . Нажмите кнопку “Сгенерировать код”. Код будет автоматически скопирован в буфер обмена, и вы увидите уведомление.
Шаг 2: Вставьте код на сайт
Перейдите в Taptop и откройте настройки страницы: на вкладке Страницы нажмите иконку шестеренки рядом с названием нужной страницы.
В блоке "Перед тегом <body>" вставьте сгенерированный код.
Сохраните изменения на странице и опубликуйте ее (Ctrl+Shift+S).
Использование типа анимации "Custom CSS"
Если вы выбрали тип анимации "Custom CSS", то можете использовать CSS-код для лоадеров с таких сайтов, как:
Как это работает
Перейдите на один из указанных сайтов и выберите понравившийся лоадер.
Пример выбора лоадера на css-loaders.com
Скопируйте CSS-код для лоадера. Обычно на сайтах есть кнопка "Copy CSS" или иконка копирования.
Нажимаем на "Copy the CSS" (пример для: css-loaders.com)
Вставьте скопированный CSS в поле "CSS-код загрузчика" в генераторе.
Вставляем код
Убедитесь, что основной элемент вашей анимации использует класс .loader в CSS.
Например:
.loader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
/* ... и т.д. */
}
.loader::before {
/* ... стили для псевдоэлемента ... */
}Если полученный CSS использует другой основной класс, его нужно заменить на .loader.
💡 Цвет анимации для типа "Custom CSS" полностью определяется полученным CSS-кодом.
<loader-generator></loader-generator>
