---
description: Компонент для отображения индикатора загрузки.
tags: loading
---

<Overview group="feedback">

# Spinner [tag:component]

Компонент для отображения индикатора загрузки. Используется во время выполнения асинхронных операций.

Связанные компоненты:

- [`ScreenSpinner`](/components/screen-spinner)

</Overview>

{/* @example-description: Базовый индикатор загрузки `Spinner`. */}
<Playground>
  ```jsx
  <Spinner />
  ```
</Playground>

## Настройка отображения

### Размеры

Задаются свойством `size`:

{/* @example-description: Сравнение размеров `Spinner`: `xl`, `l`, `m`, `s`. */}
<Playground aria-busy={true} aria-live="polite">
  ```jsx
  <Spinner size="xl" />
  <Spinner size="l" />
  <Spinner size="m" />
  <Spinner size="s" />
  ```
</Playground>

### Анимация

Можно отключить анимацию с помощью свойства `disableAnimation`:

{/* @example-description: `Spinner` с отключенной анимацией через `disableAnimation`. */}
<Playground>
  ```jsx
  <Spinner disableAnimation />
  ```
</Playground>

### Цвет

По умолчанию наследует цвет родителя (определённое css-свойство `color`).

Для ручного управления цветом используйте свойство `noColor`:

{/* @example-description: `Spinner` с пользовательским цветом контейнера и `noColor`. */}
<Playground>
  ```jsx
  <div style={{ color: "#FF0000" }}>
    <Spinner noColor />
  </div>
  ```
</Playground>

## Когда использовать

- Во время загрузки данных.
- При выполнении фоновых операций.
- В сочетании с кнопками/формами.

## Альтернатива

Для полной блокировки интерфейса используйте [`ScreenSpinner`](/components/screen-spinner):

```jsx
<ScreenSpinner state="loading" />
```

## Доступность (a11y) [#a11y]

### Базовые требования

Чтобы уведомить о выполнении асинхронного процесса пользователей скринридеров, проставьте на контейнер,
в котором выполняется процесс, метки [`aria-busy`](https://doka.guide/a11y/aria-busy/) и [`aria-live`](https://doka.guide/a11y/aria-live/)

```jsx
<div aria-busy={true} aria-live="polite">
  <Spinner />
</div>
```

### Пользовательский текст для скринридеров

Чтобы заменить текст, который прочитает скринридер, передайте его в `children`.
Он будет скрыт визуально, но останется доступным для ассистивных технологий.

```jsx
<Spinner>
  <VisuallyHidden>Идёт загрузка профиля...</VisuallyHidden>
</Spinner>
```

## unstable_ExpressiveSpinner

Нестабильный компонент индикации загрузки в стиле
[M3 Expressive](https://m3.material.io/components/loading-indicator/overview).
Принимает все свойства, которые принимает компонент `Spinner`.
Для платформы `ios` используется обычный `Spinner`.

<Playground>
  ```jsx
  import { unstable_ExpressiveSpinner as ExpressiveSpinner} from "@vkontakte/vkui";

  <ExpressiveSpinner size="xl" />
  ```
</Playground>

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `disableAnimation` | `boolean` | `-` | Отключение анимации. |
| `getRootRef` | `Ref<HTMLSpanElement>` | `-` |  |
| `noColor` | `boolean` | `-` | Задать цвет можно будет через свойство color родителя. |
| `size` | `"s" \| "m" \| "l" \| "xl"` | `-` | Размер спиннера. |
| `visibilityDelay` | `number` | `-` | Задерживает отрисовку элемента на заданное количество миллисекунд. |