---
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-04-11
lang: en
author: "Aditya Sharma"
description: "Are you looking to create a page loading animation with Lottie Files? Adding a preloader animation to your website can improve the user experience and give your site a professional..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Lottie-File-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 359
---

# How to Add Lottie File Preloader Animation in Elementor?

## 

- Utilizes the Preloader widget from The Plus Addons for Elementor to implement Lottie file animations.
- Requires a free account on LottieFiles.com to access and copy Lottie file URLs.
- Enables Lottie files by activating the Load Lottie JS option in Plus Settings under Extra Options.

Are you looking to create a page loading animation with Lottie Files? Adding a preloader animation to your website can improve the user experience and give your site a professional touch. If you're looking for a more dynamic and engaging preloader animation, you may want to consider using a Lottie file. Lottie is an open-source animation library that allows designers to create and export animations in a lightweight JSON format. 

With the Preloader widget from The Plus Addons for Elementor, you can use unique Lottie Files as loading animation for your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, [click here](/docs/preloader-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, 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)

First go to [LottieFiles.com](https://lottiefiles.com/) and create a free account there if you don’t have one.

Now log into your account and go to [Featured](https://lottiefiles.com/featured) here you’ll find all the free Lottie files.

Click on the animation you like, it will open in a popup, copy the Lottie file URL from the **Lottie Animation URL** field. You need to have an account on Lottiefiles.com to copy the animation URL.

![copy lottie files url](https://theplusaddons.com/wp-content/uploads/2023/04/copy-lottie-files-url.gif)

Now go back to your WordPress Dashboard and go to **Plus Settings** > **Extra Options**.

Scroll down the page to **Load Lottie JS in Pre Loader** section and turn on the toggle and click on the **Save** button.

![lottie js activate](https://theplusaddons.com/wp-content/uploads/2023/04/lottie-js-activate.png)

This will enable you to use Lottie files on your website.

Now add the Preloader widget on the page or template, in the **Content** tab, you’ll find an item under **Preloader**.

Open the item and select **Lottie **from the **Select** dropdown.

In the **Lottie URL** field, paste the copied Lottie file URL.

![preloader lottie](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-lottie.png)

You can manage the Lottie File width and height from the **Width** and **Height** section, respectively. From the **Speed** slider, you can increase the Lottie File animation speed.

You can turn on the **Loop Animation** toggle to make the animation loop.

Now you should have a beautiful page loading animation with a Lottie file.

![preloader lottie demo](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-lottie-demo.gif)

Also, check [How to Add Icon Preloader Animation in Elementor](https://theplusaddons.com/docs//icon-preloader-animation-in-elementor/).