Радар в Tilda: прелоадер с кольцами, вращающимся лучом и названием

Кольца расходятся от центральной точки, по ним проходит вращающийся луч. Рядом можно показать название проекта и проценты. Такой прелоадер создаёт короткую сцену в стиле радара без фонового видео.

Он не определяет местоположение и не сканирует устройства. Движение и число относятся к готовому визуальному сценарию. Разберём кольца, луч и длительность отдельно, чтобы изменение скорости вращения не путалось с общим временем вступления.

В конструкторе доступно от одного до пяти колец. Настройте фон, акцент, толщину, размер и начальную непрозрачность. Сначала посмотрите общий рисунок без лишних надписей.

Одно крупное кольцо и несколько тонких создают разный ритм. Большее количество не обязательно выглядит лучше на телефоне. Проверьте расстояния и читаемость центра. Если всё сливается, сравните толщину и прозрачность, а не увеличивайте яркость одновременно у всех элементов. Главная форма должна оставаться понятной даже в небольшом размере.

Длительность пульса задаёт ритм колец. Посмотрите несколько повторов и оцените, как они расходятся относительно центральной точки.

Сначала настройте спокойное читаемое движение. Затем добавьте луч и сравните сочетание. Если оба элемента двигаются слишком активно, трудно различить основу композиции. Увеличение времени пульса не равно увеличению всей заставки: это настройка одного движения внутри сцены. Общую длительность сканирования вы зададите отдельно после того, как будете довольны рисунком.

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

Более быстрый оборот не сокращает автоматически длительность прелоадера. Он лишь меняет движение луча внутри того же сценария. Проверьте, не закрывает ли яркая часть название и проценты. Если центр теряется, сначала уменьшите влияние луча и сравните размеры. Слишком сильное свечение может сделать простую точку большим пятном, особенно на маленьком экране.

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

Счётчик связан с временем сцены и не измеряет объём загруженных файлов. Не подписывайте его как реальный поиск координат или обнаружение устройства: таких функций у мода нет. На телефоне проверьте самое длинное название в момент, когда луч проходит за ним. Текст должен читаться во всём цикле, а не только на удобном кадре.

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

Вставьте код в T123 в начале страницы и опубликуйте. Если включено удержание анимаций Tilda, проверьте, что они запускаются после заставки. Оставьте один прелоадер. Дождитесь полного исчезновения радара, затем нажмите первую кнопку и прокрутите сайт. Зацикленное превью помогает подбирать параметры; опубликованная сцена должна вовремя закончиться.

• Количество колец подходит узкому экрану.
• Луч и пульсация не мешают читать текст.
• Центральная точка сохраняет форму.
• Название помещается на телефоне.
• После затухания доступны кнопки и прокрутка.

Проверьте обычный и сокращённый режимы движения. Если хочется спокойнее, уменьшите число активных деталей или замедлите отдельный ритм. Для простого кругового индикатора можно сравнить этот вариант с «Кольцом-прогрессом»: радар добавляет именно луч и расходящиеся кольца, а не новые данные о посетителе.

Читайте также: Кольцевой прелоадер в Tilda: размер, заполнение и вращение · Прелоадер-эквалайзер в Tilda: полосы, счётчик и спокойное завершение.