Кольцевой прелоадер в Tilda: размер, заполнение и вращение

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

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

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

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

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

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

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

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

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

Проценты можно отключить, а бренд — оставить или убрать отдельно, очистив текст. Сравните несколько вариантов: иногда одно короткое слово внутри кольца выглядит яснее, чем название, подпись и крупное число вместе. Если счётчик остаётся, не описывайте его как точное измерение загрузки ресурсов. Кольцо и цифры показывают заданный сценарий заполнения.

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

Скопируйте код в T123 ближе к началу страницы и опубликуйте её. GIF, видео или файл Lottie для этого кольца не требуются. Не подключайте рядом второй прелоадер: два слоя могут одновременно перекрывать содержимое и управлять прокруткой. После установки дождитесь исчезновения кольца, затем проверьте первую кнопку и переход к следующему разделу.

• Максимальный размер удерживает кольцо на большом экране.
• На телефоне название помещается внутри.
• Дорожка и активная дуга различимы.
• Вращение не затрудняет чтение.
• После завершения нет перекрытия над сайтом.
• Страница остаётся доступной при системном уменьшении движения.

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

Читайте также: Прелоадер с монограммой в Tilda: прорисовка буквы и рамки · Прелоадер с Lottie в Tilda: своя анимация перед открытием страницы.