---
title: "How to Add Icon Preloader Animation in Elementor?"
url: https://theplusaddons.com/docs/icon-preloader-animation-in-elementor/
date: 2023-04-07
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "An icon preloader shows a single icon in the middle of the screen while the page loads. It is the lightest of the preloader types — no image file to..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Icon-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 601
---

# How to Add Icon Preloader Animation in Elementor?

## 

- The Pre Loader widget in The Plus Addons for Elementor Pro lets a user pick any icon from the Elementor icon library or upload an SVG for an icon preloader.
- The Plus Addons for Elementor requires the site-wide Pre Loader setting to be set to Entire Site under ThePlus Addons > Extra Options > Settings > Design before anything renders on the front end.
- Style > Icon > Size has no default value, and leaving it empty makes the SVG width 0 px so the icon stays invisible until a size is set.
- The icon preloader appears in a fixed full-screen overlay at z-index: 12345, does not spin by default, and disappears about a second after the page finishes loading.

An icon preloader shows a single icon in the middle of the screen while the page loads. It is the lightest of the preloader types — no image file to download.

The **Pre Loader** widget from The Plus Addons for Elementor lets you pick any icon from the Elementor icon library, or upload your own SVG.

*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 Icon Preloader

- Add the **Pre Loader** widget to the page or to a header or footer template.- On the **Content** tab, open the item in the **Preloader** list.- Set **Select** to **Icon**.- Pick an icon in the **Icon** field, or upload an SVG. The field starts on the Font Awesome spinner.- Go to **Style > Icon** and set a **Size**. Do this before you publish — see the note below.- Update the page and open it.

![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)

> ***Set the Size.** **Size** has no default value. Elementor renders icons as inline SVGs, and an SVG with no size has a width of 0, so the icon is on the page but invisible. We measured a width of 0 px with **Size** left empty. Setting it fixes the problem.*

## What It Looks Like

![An icon preloader shown in the middle of the screen while an Elementor page loads](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-icon-demo.png)

## Style It

| Setting | What it does |
| ------- | ------------ |
| **Size** | Width and height of the icon. Has no default — set it. |
| **Color** | The icon colour (the SVG fill) |
| **Background** | A classic or gradient background behind the icon |
| **Padding**, **Margin** | Space around the icon |
| **Border**, **Border Radius** | A frame, or a circle, around the icon |

All of these are on the **Style** tab under **Icon**.

## How It Behaves

- The icon is drawn in the middle of a fixed, full-screen overlay at `z-index: 12345`.- **The icon does not spin.** The widget adds no animation to it. If you want movement, either choose an animated icon type — [Lottie](https://theplusaddons.com/docs/lottie-file-preloader-animation-in-elementor/) or [Custom Code](https://theplusaddons.com/docs/custom-css-preloader-animations-in-elementor/) — or add your own CSS animation to the icon.- The preloader disappears about a second after the page finishes loading.

## Limitations

- **Size** has no default, so a freshly added icon preloader shows nothing.- There is no rotation, pulse or any other built-in motion for this type.- Nothing renders on the front end until the site-wide **Pre Loader** setting is on.

## Troubleshooting

### The screen is blank while the page loads

The overlay is there but the icon has no size. Set **Style > Icon > Size**.

### I want a spinning loader instead

Set **Select** to **Predefined** and choose one of the thirteen ready-made animations, from **Animation 1** to **Animation 13**.

### Nothing appears at all

Turn on **ThePlus Addons > Extra Options > Settings > Design > Pre Loader**.

## Related Docs

- [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Text Based Preloader Animation in Elementor?](https://theplusaddons.com/docs/text-based-preloader-animation-in-elementor/)- [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/)

## Frequently Asked Questions

**Q: Why does the icon preloader show a blank screen while the page loads?**
A: The overlay is loading, but the icon itself has no size. In this widget, Size has no default value, and Elementor renders icons as inline SVGs, so an SVG with no size ends up with a width of 0 px and looks invisible. Setting Style > Icon > Size fixes that immediately. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this setting to make the icon visible on the front end.

**Q: How do I make the preloader appear on the whole site instead of just one page?**
A: The site-wide switch has to be turned on or the preloader’s CSS and JavaScript never load on the front end. In ThePlus Addons > Extra Options > Settings > Design, open the gear on the Pre Loader card and set Pre Loader to Entire Site, then save. That setting is what makes the widget actually render across the site, not just inside a single page or template.

**Q: Can I use my own SVG for an icon preloader in Elementor?**
A: The Pre Loader widget lets you pick any icon from the Elementor icon library or upload your own SVG. That gives you a lightweight preloader without an image file to download, which is why this type is described as the lightest option. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides that flexibility inside the Elementor editor.

**Q: How do I get a spinning loader instead of a static icon?**
A: This icon preloader does not spin by default. If you want motion, switch Select to Predefined and choose one of the thirteen ready-made animations, from Animation 1 to Animation 13. Another option mentioned on the page is using Lottie or Custom Code if you want animated movement rather than a static icon.

**Q: What do I need enabled before the Pre Loader widget will work?**
A: The widget ships only in The Plus Addons for Elementor Pro, so Pro has to be installed and activated first. It also needs the Pre Loader widget enabled under The Plus Addons > Widgets, and the site-wide Pre Loader setting turned on under Extra Options > Settings > Design. Without those pieces in place, nothing loads on the front end.

**Q: What are the main limitations of an icon preloader in Elementor?**
A: This type is intentionally minimal: it shows a single icon in a fixed full-screen overlay at z-index 12345, it does not spin, and it disappears about a second after the page finishes loading. Size also has no default value, so a fresh setup can look broken until you set it. That makes it best for simple branding or a clean loading state, not motion-heavy effects.