---
title: "How to Add Lottie File Preloader Animation in Elementor?"
url: https://theplusaddons.com/docs/lottie-file-preloader-animation-in-elementor/
date: 2023-04-07
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Lottie-File-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 661
---

# How to Add Lottie File Preloader Animation in Elementor?

## 

- The Plus Addons for Elementor Pre Loader widget plays a Lottie file directly from a JSON URL, and the URL must end in .json or the whole preloader disappears.
- The Plus Addons for Elementor Pro ships the Pre Loader widget only in the Pro edition, and the free plugin does not contain it.
- Pre Loader settings include Width, Height, Speed, and Loop Animation, with Width and Height ranging from 1 to 700 px and defaulting to 300 px.
- Load Lottie JS in Pre Loader is a separate switch that must be on for the Lottie player script to load, and the site-wide Pre Loader setting must be set to Entire Site before anything appears on the front end.

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

![The Load Lottie JS in Pre Loader switch in ThePlus Addons settings](https://theplusaddons.com/wp-content/uploads/2023/04/lottie-js-activate.png)

## Get a Lottie File URL

- Open [LottieFiles](https://lottiefiles.com/) and sign in — a free account is enough.- Pick an animation you like.- Copy the animation's JSON URL from the file's page.

![Copying a Lottie animation URL from LottieFiles](https://theplusaddons.com/wp-content/uploads/2023/04/copy-lottie-files-url.gif)

> ***The URL must end in .json.** Any other file, including a .lottie bundle, 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.

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

On the published page the animation plays in the middle of the loading screen:

![A Lottie ring animation playing in the middle of a full-screen preloader overlay](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-result-lottie.webp)

![A Lottie file playing as the page loading animation](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-lottie-demo.gif)

## 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 `.json` URLs 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.

## Related Docs

- [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Icon Preloader Animation in Elementor?](https://theplusaddons.com/docs/icon-preloader-animation-in-elementor/)- [How to Add Custom CSS Preloader Animations in Elementor?](https://theplusaddons.com/docs/custom-css-preloader-animations-in-elementor/)- [How to Add Image Preloader Animation in Elementor?](https://theplusaddons.com/docs/image-preloader-animation-in-elementor/)