Индикаторы прогресса и загрузки
Категория 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 — Горизонтальная полоса, которая заполняется по мере выполнения задачи.
Единственный доступный триггер действия для лоадеров — On Screen Appear. Чтобы показать лоадер при нажатии на элемент, установите для лоадера Visibility в значение Hide. Затем выберите элемент, который должен запускать лоадер, и добавьте действие Show element с триггером On Tap.
Настройка Duration у лоадера управляет длиной его анимации заполнения или вращения, но не временем отображения экрана. Триггер On screen appear с действием Navigate to screen срабатывает мгновенно, не дожидаясь лоадера. Чтобы загрузочный экран показывался до 5 секунд, добавьте Delay к переходу экрана этого действия. Для более длительного ожидания добавьте Timer с триггером On timer end, который выполняет переход на следующий экран. Длительность таймера задаётся в целых секундах.
Оставьте для параметра Visibility таймера значение Show, чтобы его триггер On timer end срабатывал. Чтобы скрыть таймер визуально, сделайте цвет текста полностью прозрачным или совпадающим с цветом фона.