> ## 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.

# Loader

> Отображает компактный анимированный индикатор загрузки рядом с меткой статуса.

## Обзор

`Loader` отображает анимированную точку внутри небольшой капсулы с рамкой. Используйте его, когда выполняется операция и процент выполнения неизвестен. Для числового прогресса используйте [ProgressBar](https://docs.twenty.com/ru/ui/primitives/feedback/progress-bar.md).

**Light**

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

**Dark**

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

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

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

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

type SaveFeedbackProps = { isSaving: boolean };

export const SaveFeedback = ({ isSaving }: SaveFeedbackProps) => (
  <Text
    render={<div />}
    role="status"
    style={{ display: 'flex', alignItems: 'center', gap: 8 }}
  >
    {isSaving && <Loader color="blue" aria-hidden="true" render={<span />} />}
    {isSaving ? 'Saving changes' : 'Changes saved'}
  </Text>
);
```

Разместите видимый текст состояния рядом с индикатором загрузки в обертке. Индикатор загрузки — это визуальный индикатор фиксированного размера, который не принимает дочерние элементы.

Приложение управляет состоянием загрузки. Не размонтируйте контейнер статуса, чтобы можно было объявлять обновления текста. По умолчанию индикатору загрузки не назначаются ни метка, ни роль живой области. Используйте `aria-hidden="true"`, когда окружающий текст или кнопка уже сообщают о загрузке.

## Нативная композиция и именование

Нативные пропсы, `className`, `style` и `ref` применяются к контейнеру div. `render` принимает элемент или функцию обратного вызова через композицию Base UI. Стили переопределяют цвета по умолчанию. `LoaderProps` экспортируется из семейства feedback.

Для автономного индикатора укажите явную роль состояния и доступное имя. Анимированная точка остаётся декоративной.

```tsx theme={null}
import { Loader, type LoaderProps } from 'twenty-ui/primitives/feedback';

const loadingProps: LoaderProps = {
  role: 'status',
  'aria-label': 'Loading results',
  color: 'blue',
};

export const LoadingResults = () => (
  <Loader {...loadingProps} render={<span />} />
);
```

Используйте вместо этого `aria-labelledby`, когда видимый текст называет состояние. Оставляйте владельца живой области смонтированным, когда ему нужно объявлять об изменении текста. Приложение определяет, когда отображается обратная связь и что она сообщает.

## Цвет

Передайте цвет из палитры темы, чтобы задать и рамку, и точку. Без цвета загрузчик наследует цвет окружающей кнопки, если он доступен; в противном случае используется третичный цвет текста. Для действия кнопки предпочтительно использовать [состояние загрузки Button](https://docs.twenty.com/ru/ui/primitives/input/button.md#state-ownership), при котором индикатор остаётся внутри элемента управления.

## Свойства

**aria-hidden** `Booleanish`

Hide a decorative loader when another element supplies loading feedback.

**aria-label** `string`

Accessible name for a labeled loader status.

**aria-labelledby** `string`

ID of text that names the loader status.

**className** `string`

CSS class merged with the loader container class.

**color** `"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "turquoise" | "violet" | "yellow"`

Theme color for the animated dot and border. When omitted, inherits the button color if available, otherwise the tertiary text color.

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

Ref to the container div, or the element supplied through render.

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

Element or render callback composed through Base UI useRender.

**role** `AriaRole`

Supply status to expose loading feedback as a live region. No role is assigned by default.

**style** `CSSProperties`

Native styles merged with the loader color defaults. Explicit styles win.


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