---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/extensions/shimmer.md
  - https://divkit.tech/docs/ru/concepts/extensions/shimmer.md
  - href: https://divkit.tech/docs/ru/concepts/extensions/shimmer.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/ru/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt?revision=r22102947

# Мерцающая заглушка изображения

Расширение `shimmer` показывает на месте изображения анимированную заглушку с движущимся градиентом, пока изображение загружается. На Android расширение работает с элементами [div-image](https://divkit.tech/docs/ru/concepts/divs/2/div-image.md) и [gif-image](https://divkit.tech/docs/ru/concepts/divs/2/div-gif-image.md), на iOS — только с `div-image`. В Web расширение не поддерживается.

{% cut "Пример" %}

```json translate=no
{
  "type": "image",
  "image_url": "https://example.com/image.png",
  "width": {
    "type": "fixed",
    "value": 200
  },
  "height": {
    "type": "fixed",
    "value": 120
  },
  "extensions": [
    {
      "id": "shimmer",
      "params": {
        "colors": [
          "#FFE9E9E9",
          "#FFFBFBFB",
          "#FFE9E9E9"
        ],
        "locations": [
          0,
          0.5,
          1
        ],
        "angle": 0,
        "duration": 1.5,
        "corner_radius": {
          "top-left": 16,
          "top-right": 16,
          "bottom-left": 16,
          "bottom-right": 16
        }
      }
    }
  ]
}
```

{% endcut %}

## Параметры {#params}

Все параметры необязательные и поддерживают выражения.

#|
||
**Параметры**
|
**Описание**
||

||
`id`
|
Идентификатор расширения.
||

||
`colors`
|
Массив цветов градиента.
||

||
`locations`
|
Положения цветов в градиенте: числа от `0` до `1`, по одному на каждый цвет из `colors`.
||

||
`angle`
|
Угол наклона градиента в градусах. По умолчанию: `0`.
||

||
`duration`
|
Длительность одного прохода анимации в секундах. Значение должно быть больше нуля.
||

||
`corner_radius`
|
Радиусы скругления углов заглушки. Объект с необязательными полями `top-left`, `top-right`, `bottom-left` и `bottom-right`. Угол без радиуса не скругляется.
||
|#

Задавайте `colors` и `locations` вместе и с одинаковым количеством значений. Цвета, положения цветов и длительность по умолчанию различаются на Android и iOS. Чтобы заглушка выглядела одинаково, задавайте эти параметры явно.

## Подключение {#connect}

{% list tabs %}

- Android

  build.gradle

  ```groovy translate=no
  dependencies {
      implementation "com.yandex.div:div-shimmer:${versions.divkit}"
  }
  ```

  В коде:

  ```kotlin translate=no
  val divConfiguration = DivConfiguration.Builder(imageLoader)
      .extension(DivShimmerExtensionHandler())
      .build()
  ```

- iOS

  ```swift translate=no
  DivKitComponents(
    ...
    extensionHandlers: [
      ShimmerImagePreviewExtension()
    ]
  )
  ```

{% endlist %}

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->