> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ProgressBar

> Показывает измеряемый или неопределенный прогресс с помощью горизонтальной полосы.

## Обзор

`ProgressBar` обеспечивает горизонтальное представление для [прогресса](https://docs.twenty.com/ru/ui/primitives/feedback/progress.md). Он сохраняет полный контракт корневого элемента, включая нативные атрибуты, refs, композицию рендеринга, форматирование, пользовательские диапазоны и неопределенный прогресс. Укажите для него `aria-label`, идентифицирующий операцию.

**Light**

[Пример ProgressBar (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример ProgressBar (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-progressbar-progressbar--display)

## Использование

```tsx theme={null}
import { ProgressBar } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

type ImportProgressProps = { importedRecords: number | null };

export const ImportProgress = ({ importedRecords }: ImportProgressProps) => (
  <Text style={{ display: 'grid', gap: 8, width: 300 }}>
    <Text>Importing records: {importedRecords ?? 'preparing'}</Text>
    <ProgressBar
      value={importedRecords}
      max={1000}
      aria-label="Importing records"
    />
  </Text>
);
```

## Управление состоянием и диапазоны

`value` является обязательным и управляется приложением. Режим `defaultValue` отсутствует. Компонент не запускает запрос и не увеличивает прогресс самостоятельно. Передайте `null`, если ход выполнения неизвестен. Неконечные значения также остаются неопределёнными.

Значение `min` по умолчанию равно `0`, а `max` — `100`. Конечные значения ограничиваются диапазоном для семантического значения и нормализованного заполнения. Значение `70` в диапазоне от `20` до `120` заполняет половину полосы и сообщает `50%`, при этом `aria-valuenow` остаётся равным `70`.

**Light**

[Ненулевой минимум и пользовательский максимум (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ненулевой минимум и пользовательский максимум (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-progressbar-progressbar--custom-range\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-progressbar-progressbar--custom-range)

Используйте `aria-valuetext`, `getAriaValueText`, `locale` и `format`, как описано в [Progress](https://docs.twenty.com/ru/ui/primitives/feedback/progress.md). Используйте составные части Progress, когда меткам и значениям требуется собственное видимое расположение.

Используйте [Toast](https://docs.twenty.com/ru/ui/components/feedback/toast.md) для уведомлений с обратным отсчетом до закрытия и приостановкой при наведении.

## Внешний вид и композиция

`size` выбирает полосу шириной 6px или 8px. `barColor` и `backgroundColor` принимают цвета CSS, включая переменные темы. `withBorderRadius` скругляет дорожку и индикатор. `withMinimumFillWidth` сохраняет небольшое декоративное заполнение только между минимумом и завершением. Этот минимум составляет не более 12px и половины ширины полосы, поэтому узкая полоса всё равно отличает незавершённый прогресс от завершения. Он не заполняет пустую полосу и не изменяет семантические значения.

Нативные атрибуты, `className`, `style` и `ref` нацелены на корневой элемент. `className` и `style` могут получать состояние прогресса. `render` может заменять корневой элемент, сохраняя его семантику. Неопределённый прогресс имеет собственный вид без указания числового процента. Настройки уменьшения движения отключают переходы заполнения и движение неопределённого прогресса.

Комбинируйте [части Progress](https://docs.twenty.com/ru/ui/primitives/feedback/progress.md) для пользовательских макетов или анимации функций. Сроки функций, анимация появления, блики, пружинная анимация и обратные вызовы завершения относятся к композиции приложения.

## Миграция

Замените `ariaLabel` на нативный `aria-label`. Свойства `withGrowIn`, `withGlint`, `withSpringFill` и `onGrowInComplete` удалены. Реализуйте их внешний вид, сроки и обратные вызовы завершения в композиции приложения, используя [части Progress](https://docs.twenty.com/ru/ui/primitives/feedback/progress.md). Нативный `onAnimationEnd` остаётся доступным в корневом элементе.

## Свойства

**aria-label** `string`

Accessible name identifying the measured operation.

**aria-labelledby** `string`

ID of the visible label that names the operation.

**aria-valuetext** `string`

Human-readable progress value overriding the default formatted value.

**backgroundColor** `string` (default: none)

CSS background color of the track.

**barColor** `string`

CSS color of the filled bar. Defaults to the primary text color.

**children** `ReactNode`

Additional Progress parts or supporting content inside the root.

**className** `string | ((state: ProgressRootState) =\> string | undefined)`

Class applied to the progress root, or a callback receiving its status.

**format** `NumberFormatOptions`

Intl.NumberFormat options for the clamped numeric value. The default displays the normalized percentage.

**getAriaValueText** `((formattedValue: string, value: number | null) =\> string)`

Receives the formatted value and raw value, including null, and returns an accessible value description.

**locale** `LocalesArgument`

Locale or locale list used to format the value. Defaults to the runtime locale.

**max** `number` (default: 100)

Inclusive maximum. Defaults to 100.

**min** `number` (default: 0)

Inclusive minimum. Defaults to 0.

**ref** `Ref\<HTMLDivElement\>`

Ref to the root div, or the element composed through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, ProgressRootState\>`

Composes the root with an element or render callback. Forward the supplied props and ref to retain progress semantics.

**size** `"md" | "sm"` (default: md)

Bar height: sm (6px) or md (8px).

**style** `CSSProperties | ((state: ProgressRootState) =\> CSSProperties | undefined)`

Inline styles applied to the progress root, or a callback receiving its status.

**value** `number | null` *required*

Controlled value in the min/max range. Use null for indeterminate progress.

**withBorderRadius** `boolean` (default: false)

Rounds the track and indicator corners.

**withMinimumFillWidth** `boolean` (default: true)

Applies a cosmetic minimum of up to 12px, capped at half the track width, only above the minimum and below completion.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.