Индикаторы прогресса и загрузки
Категория Progress предоставляет два типа элементов — один для пошагового прогресса по многоэкранному флоу, второй для индикаторов занятости на месте.
Индикаторы прогресса
Стили индикатора
Элемент Progress показывает, на каком экране многошагового флоу находится пользователь. Категория предоставляет три визуальных варианта:
- Linear — Одна полоса, которая заполняется по мере продвижения пользователя.
- Segmented — Отдельные полосы для каждого шага, заполняющиеся одна за другой.
- Connectors — Подписанные круги, соединённые линиями (например, Шаг 1, Шаг 2, Шаг 3 по порядку).
Сопоставление шагов с экранами
По умолчанию индикатор прогресса отслеживает каждый экран во флоу. Чтобы ограничить его подмножеством, выберите нужные экраны в выпадающем списке Screens. Либо откройте экран, который хотите исключить, и снимите флажок Include screen in progress indicator.
Отключите тогл One segment per screen, если вам нужен более точный контроль над количеством шагов.
Позиция шага следует за списком экранов, а не за реальным порядком, в котором их видит пользователь. В нелинейных флоу отображаемый шаг индикатора может перескакивать вперёд или возвращаться назад.
Состояния шагов
У каждого шага три состояния — Completed, Current и Upcoming. Выберите шаг внутри индикатора прогресса, чтобы отредактировать стили состояния в правой панели. Используйте Apply changes to all states, чтобы применить изменения ко всем трём состояниям.
Редактирование одного шага затрагивает все шаги в одном индикаторе.
Макет и позиционирование
Индикатор прогресса — это глобальный элемент, поэтому его нельзя разместить внутри контейнера. Также нельзя задать его позицию вручную — по умолчанию используется абсолютное позиционирование. Когда пользователь прокручивает экран, индикатор остаётся на месте, а контент прокручивается под ним.
Чтобы управлять отступами вокруг индикатора, используйте элементы управления Margin и Padding в разделе Spacing, а не пытайтесь перемещать сам элемент. Если макет выглядит неправильно, скорректируйте отступы как у индикатора, так и у соседнего элемента.
Загрузчики
Загрузчик — это анимированный элемент, который показывает, что что-то происходит: например, обрабатываются ответы пользователя на вопросы квиза для формирования персонального плана.
В категории доступны три шаблона:
- Spinner — Круговой спиннер.
- Spinner with label — Круговой спиннер с подписью (например, «Загрузка…»).
- Loader — Горизонтальная полоса, которая заполняется по мере выполнения задачи.
Лоадер требует триггер для появления и скрытия. Откройте вкладку Interactions и настройте эту логику — например, показывайте его после того, как пользователь ответит на вопросы квиза.
Настройка Duration для лоадера управляет длительностью его анимации заполнения или вращения, а не временем отображения экрана. Триггер On screen appear с действием Navigate to screen срабатывает немедленно, не дожидаясь окончания анимации. Чтобы загрузочный экран отображался заданное время, добавьте Таймер с триггером On timer end, который выполняет переход на следующий экран. Длительность таймера задаётся в целых секундах.