---
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
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?

## Key Takeaways

- The Plus Addons for Elementor offers a Preloader widget that allows users to add an image as a preloader for their website.
- Users can manage the image's normal and fill state from the Image tab under Style in the Preloader widget.
- The Preloader widget requires The Plus Addons for Elementor to be installed and activated to function.

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/).

## Frequently Asked Questions

**Q: What should I do if the image preloader animation isn't displaying?**
A: If the image preloader animation isn't showing, ensure that the Preloader widget from The Plus Addons for Elementor is properly installed and activated. Check that you have added an image in the Image field and that the 'Loader on Image' toggle is enabled. If the image is still not appearing, verify that the image URL is correct and accessible.

**Q: Can I use the image preloader animation for a specific type of content?**
A: The image preloader animation can be used effectively for any Elementor website where you want to enhance user experience during loading times. It's particularly useful for sites with large images or complex layouts that may take longer to load. This animation informs visitors that the site is still loading, improving perceived performance.

**Q: What are the best practices for choosing an image for the preloader?**
A: When selecting an image for the preloader, choose a simple, recognizable graphic that represents your brand or website. It should be lightweight to minimize loading time and ideally have a transparent background to blend seamlessly with the loading screen. This ensures that the preloader serves its purpose without negatively impacting the user experience.

**Q: Does the image preloader animation affect page loading speed?**
A: The image preloader animation itself does not significantly impact page loading speed if the image used is optimized. However, using a large or uncompressed image can slow down the loading process. Always ensure that the image is appropriately sized and compressed to maintain a balance between visual appeal and performance.

**Q: What happens if I forget to enable the 'Loader on Image' toggle?**
A: If you forget to enable the 'Loader on Image' toggle, your selected image will not function as a preloader. Instead, it will simply display as a static image without the loading animation effect. This means visitors won't see any indication that the site is loading, which could lead to confusion or frustration.

**Q: Can I customize the loading animation further?**
A: While the primary function of the Preloader widget from The Plus Addons for Elementor is to display an image during loading, you can manage the image's normal and fill states from the Image tab under Style. This allows for some customization of how the image appears as it fills, but further animation effects would require additional custom coding or plugins.