--- 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-09-18 lang: en author: "Aditya Sharma" description: "An image preloader covers the page with your logo, or any other image, until the page has finished loading. It tells the visitor that something is happening. The Pre Loader..." image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Image-Preloader-Animation-in-Elementor_-1024x536.jpg word_count: 718 --- # How to Add Image Preloader Animation in Elementor? ## - The Plus Addons for Elementor Pre Loader widget ships only in The Plus Addons for Elementor Pro, and the free plugin does not contain it. - The Pre Loader widget shows a single image or turns that image into a loading bar that fills as the page arrives, with the sharp part measured at 15 px just after open, 179 px after 2 seconds, and 527 px after 4 seconds on a 640 px image. - The site-wide Pre Loader setting must be switched to Entire Site under ThePlus Addons > Extra Options > Settings > Design, or the preloader CSS and JavaScript never load on the front end. - Extra Option > Load Time > Minimum holds the preloader longer, while Style > Image controls Max Width, Margin, Border, and Border Radius for the image. An image preloader covers the page with your logo, or any other image, until the page has finished loading. It tells the visitor that something is happening. The **Pre Loader** widget from The Plus Addons for Elementor can show an image on its own, or turn that image into a loading bar that fills up as the page arrives. *To check the complete feature overview documentation of The Plus Addons for Elementor Pre Loader widget, [click here](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, 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) ## Before You Start - **Edition:** **Pro** — the **Pre Loader** widget ships only in The Plus Addons for Elementor Pro. The free plugin does not contain it.- **Widget to enable:** **Pre Loader**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on.- **Site-wide switch:** go to **ThePlus Addons > Extra Options > Settings**, open the **Design** tab, click the gear on the **Pre Loader** card and set **Pre Loader** to **Entire Site**, then **Save**. Until this is set, the preloader's CSS and JavaScript are never loaded on the front end and nothing appears.- **Where the settings are:** select the **Pre Loader** widget and use the **Content** tab's four sections — **Content**, **Load First**, **Page Transition** and **Extra Option** — plus the **Style** tab. ## Add an Image Preloader - Add the **Pre Loader** widget to the page, or to a header or footer template if you want it everywhere.- On the **Content** tab, open the item in the **Preloader** list.- Leave **Select** on **Image** — it is the default.- Choose your file in the **Image** field.- Update the page and open it in a new tab. ![The Pre Loader widget in the Elementor editor with the Preloader item open and Select set to Image](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-content.webp) The image now sits in the middle of a full-screen overlay until the page has loaded. ## Fill the Image as the Page Loads Switch on **Loader on Image** in the same item. The image is then drawn twice: a faded copy underneath, and a sharp copy that is revealed from left to right as loading progresses. ![An image preloader part-way through loading: the left side of the logo is sharp and the right side is faded](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-result-image.webp) We measured the reveal on a test page: the sharp part was 15 px wide just after the page opened, 179 px two seconds later and 527 px at four seconds, across a 640 px image. ![An image preloader filling up while an Elementor page loads](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-image-demo.gif) ## Style It | Setting | What it does | Where | | ------- | ------------ | ----- | | **Max Width**, **Margin**, **Border**, **Border Radius** | Size and frame the image | **Style > Image** | | **Image Loader > Normal > Opacity** | How faded the un-loaded part looks | **Style > Image** | | **Image Loader > Fill > Opacity** | How solid the loaded part looks | **Style > Image** | | **Whole Background** | Meant to set the colour behind the preloader. It had no effect in our test. | **Style > Box** | ## How It Behaves - The preloader is a fixed, full-screen overlay at `z-index: 12345`. It covers the header too, unless you exclude it — see [how to exclude content from a preloader](https://theplusaddons.com/docs/exclude-content-from-preloader-in-elementor/).- The fill is timed from how long the page actually took to load, so it finishes when the page does.- You can hold the preloader longer with **Extra Option > Load Time > Minimum**.- **Backend Visibility** only shows a static preview inside the editor; it changes nothing on the published page. ## Limitations - Nothing happens on the front end until the site-wide **Pre Loader** setting is switched on. The preloader's stylesheet and script are not even loaded before that.- There is no separate mobile image; the same file is used on every screen size.- **Style > Box > Whole Background** had no effect in our test — the loading screen stayed white. The widget's own stylesheet is loaded after Elementor's generated CSS, so a few Style controls whose rules are not scoped to the widget are overridden. The correct CSS is generated; the plugin's own rule simply wins. ## Troubleshooting ### The page loads with no preloader at all Check **ThePlus Addons > Extra Options > Settings > Design > Pre Loader**. If it is on **Specific Page/Post** and this page's ID is not in the list, nothing loads. ### The image fills instantly A fast page finishes loading before you can see the fill. Set **Extra Option > Load Time** to **Minimum** and a **Time (Second)** value to hold it on screen. ### The image is far too big Set **Max Width** under **Style > Image**. ## Related Docs - [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Icon Preloader Animation in Elementor?](https://theplusaddons.com/docs/icon-preloader-animation-in-elementor/)- [How to Add Lottie File Preloader Animation in Elementor?](https://theplusaddons.com/docs/lottie-file-preloader-animation-in-elementor/)- [How to Add Text Based Preloader Animation in Elementor?](https://theplusaddons.com/docs/text-based-preloader-animation-in-elementor/) ## Frequently Asked Questions **Q: Why is my image preloader not showing on the front end in Elementor?** A: The most common reason is that the site-wide Pre Loader switch is not set to Entire Site. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH only loads the preloader’s CSS and JavaScript on the front end after that global setting is enabled. If it is left on Specific Page/Post and the page ID is not included, nothing appears at all. **Q: How do I make an image preloader fill up as the page loads?** A: The loading-bar effect comes from turning on Loader on Image for the same preloader item. That makes the image render twice, with a faded copy underneath and a sharp copy that reveals from left to right as loading progresses. On the test page in the tutorial, the reveal reached 15 px just after open, 179 px after two seconds, and 527 px after four seconds across a 640 px image. **Q: Can I use the same image preloader on every screen size?** A: The same image file is used on every screen size, so there is no separate mobile image in this setup. That matters if your logo or artwork has small text, because it will be reused everywhere instead of swapping to a mobile-specific version. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH keeps the behavior consistent across devices. **Q: How do I keep the preloader from covering my header?** A: The preloader is a fixed full-screen overlay with z-index: 12345, so it covers the header by default. If you need the header visible, exclude it from the preloader instead of trying to fight the overlay with custom styling. That overlay behavior also explains why the loading screen sits above normal page content until the page finishes loading. **Q: What is the best way to stop an image preloader from disappearing too fast?** A: Use Extra Option > Load Time > Minimum and set a Time (Second) value. The fill animation is tied to how long the page actually takes to load, so fast pages can finish before visitors notice anything. Holding it for a minimum time keeps the animation visible long enough to feel intentional instead of flashing by. **Q: Why does my preloader image look too large?** A: Max Width under Style > Image controls that directly. The widget uses one shared image file and places it inside a full-screen overlay, so oversized artwork can dominate the screen if you leave sizing too loose. Tightening Max Width is usually cleaner than trying to compensate with other style controls because it frames the image itself.