Сканер штрихкода в Tilda: прелоадер с лучом, статусом и подтверждением

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

Полосы здесь декоративные. Ввод артикула не кодирует EAN или Code 128, а анимация не проверяет товар и оплату. Разберём размеры, подписи и завершение так, чтобы заставка оставалась понятным вступлением, а не обещала несуществующую проверку.

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

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

У метки бренда, строки сканирования и подтверждения свои настройки показа. Замените демонстрационные надписи короткими фразами, подходящими проекту.

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

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

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

Настройте скорость луча и максимальное ожидание. Просмотрите подтверждение, вспышку, сворачивание штрихкода и исчезновение фона.

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

Скопируйте готовый код в T123 в начале страницы и опубликуйте. Не добавляйте второй прелоадер поверх него или отдельную копию только для телефона.

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

• Штрихкод помещается на телефоне.
• Луч различим на фоне полос.
• Бренд и статус заменены своим текстом.
• Подтверждение не выдаёт анимацию за проверку покупки.
• Выход полностью открывает содержимое.
• Кнопки и прокрутка работают.

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

Читайте также: Прелоадер-терминал в Tilda: печать строк, статусы и название проекта · Прелоадер-одометр в Tilda: прокрутка цифр до 100 и плавный выход.