Lottie files are vector animations in a small JSON file. They stay sharp at any size and weigh much less than a GIF or a video, which makes them a good fit for a loading screen.
The Pre Loader widget from The Plus Addons for Elementor plays a Lottie file straight from its URL, with its own width, height, speed and loop settings.
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.
- Also switch on Lottie: in the same Pre Loader settings popup, turn on Load Lottie JS in Pre Loader and save. Without it the Lottie player script is never loaded.
Get a Lottie File URL
- Open LottieFiles and sign in — a free account is enough.
- Pick an animation you like.
- Copy the animation’s JSON URL from the file’s page.
The URL must end in
.json. Any other file, including a.lottiebundle, stops the widget: the whole preloader disappears and the page shows the message "Opps!! Please Enter Only JSON File Extension." instead.
Add the Lottie 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 Lottie.
- Paste the JSON URL into Lottie URL.
- Set Width and Height — both start at 300 px and go up to 700 px.
- Update the page and open it.
On the published page the animation plays in the middle of the loading screen:
Lottie Settings
| Setting | What it does | Range | Default |
|---|---|---|---|
| Lottie URL | The animation’s JSON file | — | empty |
| Width | Player width in pixels | 1–700 | 300 |
| Height | Player height in pixels | 1–700 | 300 |
| Speed | Playback speed multiplier | 1–10 | 1 |
| Loop Animation | Repeat the animation until the page has loaded | On / off | On |
How It Behaves
- The animation plays automatically and, with Loop Animation on, keeps repeating until the page has loaded.
- The size comes only from Width and Height; there is no Style-tab section for the Lottie type.
- The file is fetched from wherever its URL points, so the animation depends on that host staying up.
- Only the preloader use of Lottie needs Load Lottie JS in Pre Loader; it is a separate switch from the Lottie options elsewhere in the plugin.
Limitations
- Only
.jsonURLs work. Nothing else is accepted, and a wrong extension removes the whole preloader rather than falling back to anything. - There is no upload field — the animation has to be reachable at a URL.
- Width and Height stop at 700 px.
- Nothing appears on the front end until the site-wide Pre Loader setting is on.
Troubleshooting
The page shows “Opps!! Please Enter Only JSON File Extension.”
The URL in Lottie URL does not end in .json. Copy the JSON link, not the page link or a .lottie download.
The animation area is blank
Check that Load Lottie JS in Pre Loader is on, and that the JSON URL opens in a browser.
The animation is gone before I see it
Set Extra Option > Load Time to Minimum and give it a Time (Second) value.
