---
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/en/concepts/extensions/shimmer.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt?revision=r22102947

# Shimmer placeholder for images

The `shimmer` extension shows an animated placeholder with a moving gradient in place of the image while the image is loading. On Android, the extension works with the [div-image](https://divkit.tech/docs/en/concepts/divs/2/div-image.md) and [gif-image](https://divkit.tech/docs/en/concepts/divs/2/div-gif-image.md) elements; on iOS, only with `div-image`. The extension isn't supported on Web.

{% cut "Example" %}

```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 %}

## Parameters {#params}

All parameters are optional and support expressions.

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`colors`
|
Array of gradient colors.
||

||
`locations`
|
Positions of the colors in the gradient: numbers from `0` to `1`, one for each color in `colors`.
||

||
`angle`
|
Gradient angle in degrees. Default: `0`.
||

||
`duration`
|
Duration of one animation pass in seconds. The value must be greater than zero.
||

||
`corner_radius`
|
Corner radii of the placeholder. An object with the optional `top-left`, `top-right`, `bottom-left`, and `bottom-right` fields. A corner without a radius isn't rounded.
||
|#

Specify `colors` and `locations` together and with the same number of values. The default colors, color positions, and duration differ on Android and iOS. For the placeholder to look the same, specify these parameters explicitly.

## Connection {#connect}

{% list tabs %}

- Android

  build.gradle

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

  In the code:

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

- iOS

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

{% endlist %}

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->