How to Add Image Preloader Animation in Elementor?

Updated on April 7, 2023 by Editorial Team
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.

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.

Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website