> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/other/image-placeholder.md).

# Image Placeholder

What visitors see while an image is still loading.

Images are crucial to your website’s user experience, and how they’re presented can significantly impact it.

Kalium wraps images in a placeholder container that can have custom style, which is visible before the image is loaded. This is an indicator that *something is loading* and you can use your own creativity to make the loading state of images as better as possible.

Optionally, you can add your own brand logo or custom icon as loading indicator.

To edit these options go to **Appearance** -> **Customize** -> **General** -> **Image Placeholder**

There you can choose between three types of loading types, the default is **Plain Color**:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-af997b682942089312ec5b6e076fb2bbe0ea60c9%2FImage%20Placeholder%20Types.jpg?alt=media" alt="" width="338"><figcaption><p>Choose your preferred loading indicator</p></figcaption></figure>

Depending on the type of indicator you choose, relative options will be shown and here what they do:

* **Background** - You can set any color, gradient or the dominant color of the image.
* **Loading Animation** - a CSS loading indicator shown in the middle of image: *Modern Circular*, *Ball Scale*, *Line Scale*, *Ball Pulse* or *Semi Circle Spin*, with its own **Loader Color**.
* **Custom Image/Icon** - The image you want to show as a loading indicator.

Both the animation and the custom icon share **Alignment**, **Animation Icon Size**, and a **Padding** that appears once Alignment is anything but centered.

### Common Options

Apart from their type, each type of image placeholder will have a background which can be one of the following:

* **Plain color** - Just as name explains it.
* **Gradient** - Choose between two colors and set the angle and the type of gradient.
* **Dominant Image Color** - This will assign custom color for every image based on their dominant color extracted using PHP to get the main color of the image.

### Setting Custom Icon

1. Choose **Custom Icon** from **Image Loading Placeholder Type**
2. Click **Custom Image/Icon** box and select your loading indicator image
3. Set the desired **Alignment** inside box
4. Set **Animation Icon Size** for the image/icon