---
title: "Preloader Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/
date: 2023-04-07
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "Elementor has no page loading screen of its own. The Pre Loader widget from The Plus Addons for Elementor adds one, and gives you eight different things to show while..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/Preloader-Elementor-Widget_-Settings-Overview-1024x536.jpg
word_count: 1241
---

# Preloader Elementor Widget Settings Overview

## 

- The Pre Loader widget ships only in The Plus Addons for Elementor Pro, and the free plugin does not contain it.
- The site-wide Pre Loader setting must be set to Entire Site or Specific Page/Post before the widget’s stylesheet and script load on the front end.
- The widget offers eight preloader types: Image, Icon, Text Content, Predefined, Lottie, Custom Code, Shortcode, and Progress.
- Extra Option > Load Time controls how long the loading screen stays, with Minimum holding it for at least 1 to 60 seconds and Maximum capping it at the chosen time.

Elementor has no page loading screen of its own. The **Pre Loader** widget from The Plus Addons for Elementor adds one, and gives you eight different things to show while the page loads.

This page covers the whole widget: where to switch it on, what each preloader type does, and what the four Content-tab sections control.

***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.

## Switch It On

Two switches, in two different places, and both are needed.

- **The widget.** Go to **The Plus Addons > Widgets**, search for **Pre Loader** and turn its toggle on.

![The Plus Addons Widgets screen with the Pre Loader widget turned on](https://theplusaddons.com/wp-content/uploads/2023/04/pre-loader.png)

- **The site-wide setting.** Go to **ThePlus Addons > Extra Options > Settings**, open the **Design** tab and click the gear on the **Pre Loader** card.

![The Pre Loader card and its options in ThePlus Addons Extra Options Settings](https://theplusaddons.com/wp-content/uploads/2023/04/pre-loader-extra-options.gif)

- In the popup, set **Pre Loader** to **Entire Site**, or to **Specific Page/Post** and list the page or post IDs, separated by commas, in **Pre Loader in Specific Page/Post**. Turn on **Load Lottie JS in Pre Loader** if you plan to use a Lottie animation, then save.

![The Pre Loader setting on Specific Page/Post with a list of page IDs](https://theplusaddons.com/wp-content/uploads/2023/04/pre-loader-extra-options-specific-page-post.gif)

> ***The second switch is not optional.** The preloader's stylesheet and script are only loaded when this setting says **Entire Site**, or says **Specific Page/Post** and the page's ID is in the list. Until then the widget's markup is in the page but nothing covers the screen. The Elementor editor preview is more forgiving, so a preloader can look right in the editor and do nothing on the published page.*

To find a page's ID, go to **Pages > All Pages** and hover the page: the number after `post=` in the link your browser shows at the bottom is the ID. The same works for any post type.

![Finding a page ID in the edit link shown by the browser](https://theplusaddons.com/wp-content/uploads/2023/04/find-page-id.png)

## Learn via Video Tutorial

https://www.youtube.com/watch?v=pi5i45p8sxc

## Add the Widget

Put the **Pre Loader** widget on a single page to cover that page only, or in a header or footer template to cover the whole site. Then open the item in the **Preloader** list on the **Content** tab and choose a type in **Select**.

![The Pre Loader widget in the Elementor editor with the Preloader item open and the Select dropdown showing the preloader types](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-content.webp)

## The Eight Preloader Types

| Select | What it shows | Main settings |
| ------ | ------------- | ------------- |
| **Image** (default) | Any image, optionally filling as the page loads | **Image**, **Loader on Image** |
| **Icon** | An Elementor icon or your own SVG | **Icon**; set **Size** on the Style tab |
| **Text Content** | A word such as *Loading*, optionally filling | **Content**, **Loader on Text** |
| **Predefined** | One of thirteen built-in animations | **Select**: **Animation 1** to **Animation 13** |
| **Lottie** | A Lottie JSON animation | **Lottie URL**, **Width**, **Height**, **Speed**, **Loop Animation** |
| **Custom Code** | Your own markup | **Code** |
| **Shortcode** | Anything a shortcode outputs, including a saved template | **Shortcode** |
| **Progress** | A progress bar or a percentage counter | **Layout**: **Layout 1** to **Layout 6** |

Click **+ ADD ITEM** to stack more than one type on the same loading screen. [How to combine multiple preloaders](https://theplusaddons.com/docs/multiple-preloaders-animations-in-elementor/).

![A progress preloader part-way through: a filling bar with the percentage above it](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-result-progress.webp)

> ***Backend Visibility** shows a static preloader inside the editor so you can design it. It changes nothing on the published page, and some types have no editor preview at all.*

## The Four Content Sections

| Section | What it is for | Doc |
| ------- | -------------- | --- |
| **Content** | The preloader itself: the list of items and Backend Visibility | this page |
| **Load First** | Keep one element visible above the loading screen | [Exclude content from a preloader](https://theplusaddons.com/docs/exclude-content-from-preloader-in-elementor/) |
| **Page Transition** | How the loading screen comes and goes | [Page loading transition effects](https://theplusaddons.com/docs/page-loading-transition-effects-in-elementor/) |
| **Extra Option** | How long the loading screen stays | below |

## Extra Option: Load Time

By default the loading screen lasts exactly as long as the page takes to load. **Load Time** changes that.

| Load Time | What it does | Example |
| --------- | ------------ | ------- |
| **Default** | Follows the real page load time | — |
| **Minimum** | Keeps the screen for at least the time you set | Set 3 and a page that loads in 2 seconds still shows the preloader for 3 |
| **Maximum** | Removes the screen after the time you set at the latest | Set 2 and a page that takes 5 seconds still only shows the preloader for 2 |

**Time (Second)** appears once you pick **Minimum** or **Maximum**, and runs from 1 to 60 seconds in steps of 1.

## Styling

The **Style** tab has one section per preloader type, plus two that always apply.

| Section | Covers |
| ------- | ------ |
| **Image** | Max Width, Margin, Border, Border Radius, and the Normal and Fill opacity of **Loader on Image** |
| **Icon** | Size, Color, Background, Padding, Margin, Border, Border Radius |
| **Text** | Typography, Color, Background, spacing, and the fill colour under **Text Loader** |
| **Predefined** | Padding and Margin. **Color 1** had no effect in our test. |
| **Progress Bar** | Width, Height, colours and per-layout options |
| **Progress Number** | Typography and colour of the percentage |
| **Progress Circle** | Empty colour, fill colour, stroke width and the percentage type, for **Layout 6** |
| **Transition Effect** | Colours used by some of the page transitions |
| **Box** | The preloader container. **Whole Background** had no effect in our test; the loading screen stayed white. |

## How It Behaves

- The loading screen is a fixed overlay covering the viewport at `z-index: 12345`.- It is removed about a second after the page has finished loading, or after the **Load Time** you set.- A preloader added to a header or footer template applies wherever that template is used; one added to a page applies to that page.- If the preloader is in a template and you only want it on some pages, use **Specific Page/Post** in the site-wide setting rather than adding the widget many times.

## Limitations

- The widget does nothing on the front end until the site-wide **Pre Loader** setting is on.- **Exclude Class** under **Page Transition** currently makes the out transition fire only on the class you name, instead of skipping it. [Details](https://theplusaddons.com/docs/page-loading-transition-effects-in-elementor/).- The **Code** field of **Custom Code** strips `<style>` tags. [Details](https://theplusaddons.com/docs/custom-css-preloader-animations-in-elementor/).- Two Style controls did nothing in our test: **Box > Whole Background** and **Predefined > Color 1**. 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. The loading screen therefore stays white, so choose a preloader that reads on white — an image, coloured text, an icon with a **Size** and **Color** set, a Lottie file or a progress bar.

## Troubleshooting

### The preloader works in the editor but not on the site

The site-wide **Pre Loader** setting is not on, or is on **Specific Page/Post** without this page's ID.

### The loading screen flashes past

That is a fast page. Use **Extra Option > Load Time > Minimum** to hold it.

### The loading screen stays too long

Use **Load Time > Maximum** to cap it, and check the page for a slow third-party script.

### The animation is invisible on the white screen

The **Predefined** animations are drawn in white and their **Color 1** control did not change that in our test. Use a type you can colour, such as **Icon**, **Text Content** or **Custom Code**.

### The preloader covers my logo and menu

That is expected. Use **Load First > Exclude Content** to lift the header above it.

## Related Docs

- [How to Add Image Preloader Animation in Elementor?](https://theplusaddons.com/docs/image-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 Page Loading Transition Effects in Elementor?](https://theplusaddons.com/docs/page-loading-transition-effects-in-elementor/)- [How to Exclude a Content From a Preloader in Elementor?](https://theplusaddons.com/docs/exclude-content-from-preloader-in-elementor/)

## Frequently Asked Questions

**Q: Why does the preloader work in the Elementor editor but not on the live site?**
A: The site-wide Pre Loader setting is the gatekeeper. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH only loads the preloader’s stylesheet and script when that setting is set to Entire Site or when Specific Page/Post includes the current page ID. In the editor, the preview is more forgiving, so it can look correct there while doing nothing on the published page. That mismatch usually means the front-end load condition is not active.

**Q: Can I use a preloader on just one page instead of the whole site?**
A: A single-page setup is built into the widget. Put the Pre Loader widget on that page, then set the site-wide Pre Loader option to Specific Page/Post and list that page’s ID. The page ID is the number after post= in the browser link when you hover it in Pages &gt; All Pages. That keeps the CSS and JavaScript from loading everywhere else, which matters if you only want one landing page covered.

**Q: What’s the best way to stop a preloader from flashing past on fast pages?**
A: Use Extra Option &gt; Load Time &gt; Minimum. By default, the loading screen lasts only as long as the page actually takes to load, so very fast pages can make it disappear almost instantly. Minimum forces it to stay up for at least the time you set, and Time (Second) can be set from 1 to 60 seconds in steps of 1. That gives you a more deliberate loading experience instead of a blink-and-miss overlay.

**Q: How do I keep a preloader from staying too long?**
A: Load Time &gt; Maximum is the control for that. It caps how long the loading screen can remain visible even if something on the page is slow. The page also notes that a slow third-party script can make a preloader hang around longer than expected, so Maximum is useful when you want a hard upper limit rather than waiting for every external asset to finish.

**Q: What should I use if my preloader animation disappears on a white screen?**
A: Pick a type that can be colored or that reads clearly on white. The page says Predefined animations are drawn in white and Color 1 did not change them in testing, while Box &gt; Whole Background also had no effect and left the loading screen white. Better options are Image, Text Content, Icon with Size and Color set, Lottie file, or Progress Bar. That avoids relying on white-on-white visuals.

**Q: How do I keep my header logo and menu above the loading screen?**
A: Use Load First &gt; Exclude Content to lift those elements above the overlay. The preloader itself is a fixed screen at z-index: 12345, so covering the logo and menu is expected unless you explicitly exclude content from it. This is useful when you want branding visible during load instead of hiding everything behind the overlay.