---
title: "Индикаторы прогресса и загрузки"
description: "Отображение прогресса по шагам и состояния занятости в флоу."
---

Категория **Progress** предоставляет два типа элементов: один для пошагового прогресса по многоэкранному флоу, другой — для индикации состояния загрузки на месте.
## Индикаторы прогресса \{#progress-indicators\}

### Стили индикатора \{#indicator-styles\}

Элемент **Progress** показывает, на каком экране многошагового флоу находится пользователь. Категория предоставляет три визуальных варианта:

- **Linear** — Одна полоса, которая заполняется по мере продвижения пользователя.
- **Segmented** — Отдельные полосы для каждого шага, заполняющиеся одна за другой.
- **Connectors** — Подписанные круги, соединённые линиями (например, Шаг 1, Шаг 2, Шаг 3 по порядку).
### Сопоставление шагов с экранами \{#match-steps-to-screens\}

По умолчанию индикатор прогресса отслеживает каждый экран во флоу. Чтобы ограничить его подмножеством, выберите нужные экраны в выпадающем списке **Screens**. Либо откройте экран, который хотите исключить, и снимите флажок **Include screen in progress indicator**.

Отключите тогл **One segment per screen**, если вам нужен более точный контроль над количеством шагов.
:::warning
Позиция шага следует за списком экранов, а не за реальным порядком, в котором их видит пользователь. В нелинейных флоу отображаемый шаг индикатора может перескакивать вперёд или возвращаться назад.
:::
### Состояния шагов \{#step-states\}

У каждого шага три состояния — **Completed**, **Current** и **Upcoming**. Выберите шаг внутри индикатора прогресса, чтобы отредактировать стили состояния в правой панели. Используйте **Apply changes to all states**, чтобы применить изменения ко всем трём состояниям.

Редактирование одного шага затрагивает все шаги в одном индикаторе.
## Загрузчики \{#loaders\}

**Загрузчик** — это анимированный элемент, который показывает, что что-то происходит: например, обрабатываются ответы пользователя на вопросы квиза для формирования персонального плана.

В категории доступны три шаблона:

- **Spinner** — Круговой спиннер.
- **Spinner with label** — Круговой спиннер с подписью (например, «Загрузка...»).
- **Loader** — Горизонтальная полоса, которая заполняется по мере выполнения задачи.
{/* - **Loader with label** — Горизонтальная полоса с подписью и процентами (например, «Анализ... 47%»). */}
:::warning
Лоадер требует **триггера** для появления и скрытия. Откройте вкладку **Interactions**, чтобы настроить эту логику — например, показывать его после того, как пользователь прошёл квиз.
:::