The Pre Loader widget ships with thirteen ready-made animations, but you may already have a CSS loader that matches your brand, or have found one on a site such as CSS Loaders or Loading.io.
The Custom Code type in the Pre Loader widget takes your own markup and draws it on the loading screen.
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.
- Somewhere to put the CSS: the widget’s Code field takes markup only, so you need a place for the stylesheet — your theme’s custom CSS, Elementor’s Custom CSS, or The Plus Addons’ own Extra Options > Custom CSS & JS.
Add the Markup
- 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 Custom Code.
- Paste only the HTML of your loader into the Code field, for example the markup below.
- Update the page.
<div class="my-loader"></div>
Add the CSS Separately
Do not paste a
<style>block into the Code field. The field is filtered before it is printed, and the filter removes<style>tags but keeps the text inside them. We tried it: the CSS appeared as a paragraph of words in the middle of the loading screen and the loader itself was never styled.
Put the stylesheet where it loads for the whole site instead. Any of these work, because the preloader markup is part of the page like any other element:
- The Plus Addons > Extra Options > Custom CSS & JS
- Elementor’s Custom CSS field, on the widget’s Advanced tab or in Site Settings
- Your theme’s or child theme’s stylesheet
The CSS itself is whatever your loader needs, for example:
.my-loader{width:64px;height:64px;border:8px solid #e9e9ff;
border-top-color:#5b5bd6;border-radius:50%;
animation:my-spin 1s linear infinite}
@keyframes my-spin{to{transform:rotate(360deg)}}
How It Behaves
- The markup is printed inside the preloader overlay, so your CSS should target your own class, not the widget’s.
- Tags that WordPress does not allow in post content are stripped from the Code field. Plain elements such as
divandspanwith a class survive;<style>and<script>do not. - The animation runs for as long as the overlay is up, and stops when it is removed.
- The Style tab has no section for this type; only Style > Box affects the container and the background.
Limitations
<style>and<script>cannot be used in the Code field.- There is no preview of the finished loader in the editor; Backend Visibility only shows a static placeholder.
- Nothing appears on the front end until the site-wide Pre Loader setting is on.
Troubleshooting
The loading screen shows my CSS as text
The <style> tag was stripped and its contents were left behind. Remove the style block from the Code field and move the CSS to your site’s stylesheet.
The markup is there but nothing is styled
The stylesheet is not loading on this page, or the class names do not match. Inspect the loading screen and check the class on your element.
I want something simpler
Set Select to Predefined and pick one of the thirteen built-in animations, or use a Lottie file.
