Progress

Компонент Progress отображает индикатор выполнения. Поддерживает determinate (с указанием значения) и indeterminate (анимированный без точного значения) режимы, а также несколько вариантов оформления и цветов.

Обзор

Основное назначение: визуализация прогресса выполнения задачи.
Ключевые возможности:
- Два режима: determinate (процент выполнения) и indeterminate (анимация ожидания).
- Анимация пульсации для активного состояния (isActive).
- Два варианта оформления: default и soft.
- Цветовая палитра с тёмной темой.
- Настройка отображения фоновой полосы (showRail).
- Нестилизованный режим (unstyled).
- Кастомизация через classNames и style.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`value`	`Number`	`0`	Текущее значение прогресса в процентах (от 0 до 100). Игнорируется в режиме `isIndeterminate`.
`isIndeterminate`	`Boolean`	`false`	Включает режим неопределённого прогресса (анимированная полоса без точного значения).
`isActive`	`Boolean`	`false`	Добавляет анимацию пульсации для активной полосы.
`color`	`String`	`'neutral'`	Цвет полосы прогресса. Возможные значения: `'neutral'`, `'primary'`, `'secondary'`, `'info'`, `'success'`, `'warning'`, `'error'`.
`variant`	`String`	`'default'`	Вариант оформления фоновой полосы. Возможные значения: `'default'`, `'soft'`.
`showRail`	`Boolean`	`true`	Показывать фоновую полосу (рельс).
`unstyled`	`Boolean`	`false`	Если `true`, убирает все стили по умолчанию.
`animationDuration`	`String`		Длительность анимации. Принимает валидное CSS-значение (например, `'2s'`).
`className`	`String`		Дополнительные CSS-классы для корневого элемента.
`classNames`	`Object`	`{}`	Объект для кастомизации внутренних классов. Ключи: `root`, `bar`.
`style`	`Object`	`{}`	Дополнительные стили для полосы прогресса.
`rootStyle`	`Object`	`{}`	Дополнительные стили для корневого элемента.
`rootProps`	`Object`	`{}`	Дополнительные атрибуты для корневого элемента.

Слоты

Имя слота	Описание
`default`	Содержимое внутри полосы прогресса (например, текст с процентами).

Режимы работы

Determinate (по умолчанию)

Полоса заполняется в соответствии со значением value (от 0 до 100). Ширина задаётся через style.width.

Indeterminate (`isIndeterminate: true`)

Полоса занимает 100% ширины с анимацией, указывающей на выполнение процесса без известного завершения. Значение value игнорируется.

Active (`isActive: true`)

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

Варианты оформления фона (rail)

`variant: 'default'`

Для neutral: серый фон (bg-gray-150).
Для цветных: фон не окрашивается цветом темы.

`variant: 'soft'`

Для neutral: серый фон (bg-gray-150).
Для цветных: полупрозрачный фон цвета темы (bg-this/[.15]).