---
title: "How to Add Image Preloader Animation in Elementor?"
url: https://theplusaddons.com/docs/image-preloader-animation-in-elementor/
date: 2023-04-07
modified: 2026-04-11
lang: en
author: "Aditya Sharma"
description: "Do you want to add Image Preloader Animation to your Elementor website? An image loading animation is a loading animation with an image that appears on the screen while the..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Image-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 213
---

# How to Add Image Preloader Animation in Elementor?

## 

- Utilizes the Preloader widget from The Plus Addons for Elementor to implement image loading animations.
- Enables image selection in the Preloader widget's Content tab, allowing customization of loading visuals.
- Activates the Loader on Image toggle to create a dynamic fill effect as the page loads.

Do you want to add Image Preloader Animation to your Elementor website? An image loading animation is a loading animation with an image that appears on the screen while the website is still loading, informing the visitor that the website is still loading.

With the Preloader widget from The Plus Addons for Elementor, you can easily use an image as a preloader for your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, [click here](/docs/preloader-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/preloader-and-page-transition/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Preloader widget on the page or template, in the **Content** tab, you’ll find an item under **Preloader**.

Open the item and select **Image** from the **Select** dropdown.

In the **Image** field, add your image.

![preloader image](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-image.png)

Then the **Loader on Image** toggle will turn your image into a loader. It will slowly fill the image as the page loads.

You can manage the image normal and fill state from the **Image** tab under **Style**.

This is how simply you can add an image loading animation to your Elementor website.

![preloader image demo](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-image-demo.gif)

Also, check [How to Add Lottie File Preloader Animation in Elementor](https://theplusaddons.com/docs//lottie-file-preloader-animation-in-elementor/).