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

<Overview group="feedback">

# Skeleton [tag:component]

Компонент для отображения анимированных заглушек во время загрузки контента.
Автоматически адаптируется под размеры и стили ожидаемого контента.

</Overview>

{/* @example-description: Базовая заглушка `Skeleton` для одиночной строки контента. */}
<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <Skeleton width="100%" />
  ```
</Playground>

## Пример использования

{/* @example-description: Комплексный пример `Skeleton` в ячейке и текстовом блоке во время загрузки. */}
<Playground>
  ```jsx
  <Group>
    <SimpleCell
      before={<Skeleton width={36} height={36} borderRadius="50%" />}
      subtitle={<Skeleton width={90} />}
    >
      <Skeleton width={120} />
    </SimpleCell>
    <Div>
      <Skeleton width="100%" />
      <Skeleton width="100%" />
      <Skeleton width="75%" />
    </Div>
  </Group>
  ```
</Playground>

## Настройка анимации

- Свойство `duration` отвечает за длительность анимации;
- Свойство `colorFrom` отвечает за начальный цвет анимации;
- Свойство `colorTo` отвечает за конечный цвет анимации.

```jsx
<Skeleton colorFrom="#f0f0f0" colorTo="#e0e0e0" duration={1.5} />
```

### Отключение анимации

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

{/* @example-description: `Skeleton` без анимации с включенным `noAnimation`. */}
<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <Skeleton noAnimation />
  ```
</Playground>

## Особенности

- Поддерживается автоматическая высота для текстовых блоков:

{/* @example-description: Автоматическая высота `Skeleton` внутри типографического компонента `Title`. */}
<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <Title style={{ width: '100%' }}>
    <Skeleton />
  </Title>
  ```
</Playground>

- Собственные размеры можно задавать через CSS-переменные:

```jsx
<Skeleton inlineSize="var(--custom-width)" blockSize="var(--custom-height)" />
```

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

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `colorFrom` | `string` | `-` | Начальный цвет анимации. |
| `colorTo` | `string` | `-` | Финальный цвет анимации. |
| `duration` | `number` | `-` | Длительность анимации в секундах. |
| `getRootRef` | `Ref<HTMLSpanElement \| HTMLDivElement>` | `-` |  |
| `noAnimation` | `boolean` | `false` | Выключает анимацию, в результате чего показывается только один цвет. |
| `visibilityDelay` | `number` | `-` | Задерживает отрисовку элемента на заданное количество миллисекунд. |