Elements

Таймер

Универсальный таймер для Tilda Zero Block: обратный отсчет до даты, таймер на время, часы, расписание, прогресс-бар, проценты и запуск по клику.

Как собрать в Tilda Классы и шаблоны

Примеры работы таймера

Почему это удобно

Один и тот же движок закрывает большинство сценариев с таймерами в Zero Block: дедлайны, расписания, локальные акции, прогресс и простые часовые виджеты.

Обратный отсчет до даты, таймер на заданное время, часы и расписание по датам и дням недели.

Поддержка нескольких таймеров в одном Zero Block через id.

Показ и скрытие элементов по состоянию таймера: активен, неактивен, пауза.

Прогресс-бар по ширине или высоте, вывод процентов и запуск или пауза по клику.

1. Как собрать таймер в Tilda

Ниже базовая схема, по которой таймер собирается быстрее всего и без ручной правки кода.

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

Видеоинструкция: таймер в Tilda

Добавь в Zero Block элемент таймера из Tildify Elements или вставь готовый пример с демо-страницы.

Для вывода одной строкой создай текстовый слой с классом tf_timer-value. Внутри текста можно использовать шаблон с токенами: {{days}} {{daysLabel}} {{hours}} {{hoursLabel}}.

Если нужен раздельный вывод по ячейкам, используй отдельные текстовые слои с классами tf_timer-days, tf_timer-hours, tf_timer-minutes, tf_timer-seconds и при необходимости отдельные подписи tf_timer-days-label и другие.

Если нужен прогресс-бар, задай элементу класс tf_timer-progress или укажи свои классы в настройке Классы фигур. Для текста процентов используй tf_timer-percent.

Если нужен ручной запуск, выбери в настройке Поведение запуска вариант По клику и укажи классы элементов для запуска и паузы.

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

Если в одном блоке несколько таймеров, используй один и тот же id у всех связанных классов: tf_timer-sale, tf_timer-value-sale, tf_timer-progress-sale, tf_timer-percent-sale.

2. Шаблон для tf_timer-value

Пример шаблона

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

Годы

Месяцы

Дни

Часы

Минуты

Секунды

Подпись для лет

Подпись для месяцев

Подпись для дней

Подпись для часов

Подпись для минут

Подпись для секунд

3. Прогресс и запуск по клику

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

Для полосы прогресса используй tf_timer-progress или свои классы через настройку Классы фигур.

Для текста процентов используй tf_timer-percent.

Чтобы запускать таймер вручную, выбери Поведение запуска → По клику и укажи классы для запуска и паузы.

Если нужно показывать разные слои в активном и неактивном состоянии, используй настройки видимости прямо в параметрах таймера.

4. Классы в Tilda

tf_timer-value

Таймер одной строкой

Текстовый слой, куда таймер пишет строку по шаблону. Поддерживает токены вида {{days}} и {{secondsLabel}}. Для нескольких таймеров: tf_timer-value-sale.

tf_timer-years / months / days / hours / minutes / seconds

Отдельные числовые значения

Используй эти классы, если значения нужно выводить по отдельным слоям. Например: tf_timer-days и tf_timer-hours.

tf_timer-years-label / months-label / days-label / hours-label / minutes-label / seconds-label

Подписи единиц времени

Отдельные текстовые слои для подписей. Таймер сам подставляет короткие или длинные словоформы по настройке Стиль подписей.

tf_timer-progress

Прогресс-бар

Элемент для визуального прогресса. Таймер может менять у него ширину или высоту. Если таймеров несколько, используй вариант с id: tf_timer-progress-sale.

tf_timer-percent

Текст процентов

Текстовый слой для вывода процентов прогресса, например 45%. Для нескольких таймеров: tf_timer-percent-sale.

5. Важные замечания

Для нескольких таймеров в одном Zero Block всегда используй единый id у всех связанных классов.

Если используешь tf_timer-value, отдельные слои tf_timer-days и другие не обязательны.

Отдельные классы *-label удобны, когда подписи должны жить в собственных слоях, а не внутри общего текстового шаблона.

Для прогресса по ширине или высоте лучше использовать shape или другой простой прямоугольный элемент, а не текстовый слой.

При ручном запуске по клику не используй один и тот же класс одновременно для запуска и паузы.