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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
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
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 or Custom Code — 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.
