Таймлайн по месяцам в Zero Block на Tilda

Главная
/
Тильда
/
Динамическая шкала прогресса

Динамическая шкала
прогресса

Шаблон страницы с кодом
ID: 79249966

Время на чтение

⏱️ ~2,5 минуты

Дата публикации

📅 18 сен 2025

Обновлено

📅 19 сен 2025

Таймлайн по месяцам в Zero Block на Tilda

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

Нажми на месяцы, чтобы взаимодействовать 👇

Так выглядит на момент публикации статьи (19.09.2025)

Как это работает

Кнопки-этапы (месяцы) располагаются на линии (по стилям нет ограничений, все можно под себя настроить, найти в интернете готовые css таймлайны или через ИИ написать и заменить в коде).

Синий цвет подсвечивает текущий месяц (определяется автоматически по дате).

Прогресс-бар заполняется по дням: сегодня 19 сентября → значит в сентябре закрашено ~70% линии.

Описание текущего месяца выводится под/над таймлайном. По клику на любую кнопку можно посмотреть описание других этапов (но цвет не меняется).

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

Где менять под себя

В коде есть массив с месяцами и описаниями:

window.TIMELINE_MONTHS = [
{ ru: "Сентябрь", m: 8, desc: "Описание этапа Сентября месяца." },
{ ru: "Октябрь", m: 9, desc: "Описание этапа Октября месяца." },
{ ru: "Ноябрь", m: 10, desc: "Описание этапа Ноября месяца." },
{ ru: "Декабрь", m: 11, desc: "Описание этапа Декабря месяца." }
],
lastEnd: null // например: "2025-12-01"

ru — название месяца (как будет отображаться)
m — номер месяца в JS (считается с нуля: январь = 0, сентябрь = 8)
desc — текст описания
lastEnd — дата окончания последнего этапа (по умолчанию — 1-е число следующего месяца)

Добавляй или убирай месяцы — шкала перестроится автоматически.

Стили

Цвета #0629d9 и #eee меняются в стилях для .tl-bubble / .tl-line-fill / .tl-line-bg

Размер шрифта у описания .tl-desc (font-size: 14px)

Скругление кнопок/табов — через border-radius: 999px;

Что учесть в Zero Block

Два HTML-элемента.

Один для десктопа (горизонтальный таймлайн).
Второй для мобилки (вертикальный).
В настройках слоёв скрой ненужный вариант на соответствующих экранах.

Ширина элементов

HTML-элемент для мобилки должен растягиваться на 100% по ширине блока — так линия прогресса всегда центрируется корректно.

Шрифты

По умолчанию стоит Inter. Хотите другой — поменяйте font-family в CSS, название должно совпадать с названием из настроек Тильды

<style>
/* Шрифт Inter по умолчанию для всего блока (убедись, что Inter подключён в Тильде) */
.tl-wrap {
width:100%;
max-width:1200px;
margin:0 auto;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
</style>

Отступы

Между будущими месяцами — 10px. Между текущим и следующим — минимум 120px (чтобы прогресс-бар был читаем). Всё это задаётся в JS, можно поменять число MIN_GAP.

Что получаем

Автоматическая подсветка текущего месяца и заполнение прогресса.
Возможность вручную посмотреть по этапам.
Адаптивность: аккуратный горизонтальный таймлайн на десктопе и вертикальный — на мобилке.