---
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
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?

## Key Takeaways

- The Plus Addons for Elementor includes a Preloader widget that allows the use of unique Lottie Files as loading animations.
- Users must create a free account on LottieFiles.com to copy the Lottie file URL for use in the Preloader widget.
- The Preloader widget enables customization of Lottie File width, height, and animation speed.

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/).

## Frequently Asked Questions

**Q: What should I do if the Lottie file URL doesn't work?**
A: If the Lottie file URL doesn't work, ensure you have copied the correct URL from LottieFiles.com. You need to have a free account to access and copy the animation URL. Double-check that the URL is pasted correctly in the Lottie URL field in the Preloader widget settings.

**Q: Can I use Lottie file preloaders for all types of websites?**
A: Lottie file preloaders can enhance user experience on various types of websites, especially those that require a professional touch. However, ensure that the animations align with your site's branding and do not distract users. The Plus Addons for Elementor allows you to easily implement these animations.

**Q: What settings work best for Lottie file preloaders in Elementor?**
A: For optimal performance, adjust the Lottie File width and height to fit your design. Use the Speed slider to control the animation speed, and consider enabling the Loop Animation toggle for continuous playback. These settings help create a smooth loading experience without overwhelming users.

**Q: Are there any limitations when using Lottie file preloaders?**
A: One limitation is that Lottie file preloaders may not be suitable for all website types, particularly those with minimalistic designs where animations could detract from the content. Additionally, ensure that the Lottie files are optimized for performance to avoid slowing down your page load times.