Circlebar

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

Обзор

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

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'`, `'gradient'`.
`size`	`Number`	`24`	Размер компонента. Конвертируется в `rem` по формуле `size / 4`.
`strokeWidth`	`Number`	`6`	Толщина линии прогресса.
`strokeLinecap`	`String`	`'round'`	Стиль окончаний линии. Принимает валидные CSS-значения (`'round'`, `'butt'`, `'square'`).
`gapDegree`	`Number`	`0`	Угол разрыва в градусах (например, `90` создаёт разрыв в четверть круга).
`offsetDegree`	`Number`		Угол начального смещения в градусах.
`gapOffsetDegree`	`Number`	`0`	Угол поворота всего SVG для позиционирования разрыва.
`showRail`	`Boolean`	`true`	Показывать фоновую дорожку.
`gradient`	`Object`	`{}`	Объект с цветами градиента. Ключи: `start`, `end`. Используется при `variant: 'gradient'`.
`className`	`String`		Дополнительные CSS-классы для SVG-элемента.
`classNames`	`Object`	`{}`	Объект для кастомизации внутренних классов. Ключи: `root`, `wrapper`, `svg`, `content`.
`contentProps`	`Object`	`{}`	Дополнительные атрибуты для контейнера контента.
`rootProps`	`Object`	`{}`	Дополнительные атрибуты для корневого элемента.
`wrapperProps`	`Object`	`{}`	Дополнительные атрибуты для элемента-обёртки.

Слоты

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

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

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

Дуга заполняется в соответствии со значением value. Путь рассчитывается на основе процентов, угла разрыва и смещения.

Indeterminate (`isIndeterminate: true`)

Отображается круг с анимацией вращения. Значение value игнорируется.

Active (`isActive: true`)

В determinate режиме добавляется светлая дуга поверх заполненной части для создания эффекта блика или свечения.

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

`variant: 'default'`

Для neutral: серая полоса (stroke-gray-500).
Для цветных: сплошной цвет темы (stroke-this).

`variant: 'soft'`

Для neutral: полоса как в default.
Для цветных: фоновая дорожка окрашивается полупрозрачным цветом темы.

`variant: 'gradient'`

Полоса заливается линейным градиентом, определённым через проп gradient.
Фоновая дорожка не окрашивается.