How to Add Image Preloader Animation in Elementor?

Updated onApril 11, 2026By

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.
Table Of Content

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.

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

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

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

Also, check How to Add Lottie File Preloader Animation in Elementor.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the image preloader animation isn't displaying?

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.

Can I use the image preloader animation for a specific type of content?

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.

What are the best practices for choosing an image for the preloader?

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.

Does the image preloader animation affect page loading speed?

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.

What happens if I forget to enable the 'Loader on Image' toggle?

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.

Can I customize the loading animation further?

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.

Last reviewed: April 11, 2026

Related Docs