---
title: "How To Add Lottie Animation In Progress Bar Elementor?"
url: https://theplusaddons.com/docs/add-lottie-animation-in-progress-bar-elementor/
date: 2024-03-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Want to make your progress bar more interesting? You can easily add cool animated Lottie files to them. Lottie uses vector animations to make smooth graphics and motion in a..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-To-Add-Lottie-Animation-In-Infobox-Elementor_-1-1024x536.jpg
word_count: 363
---

# How To Add Lottie Animation In Progress Bar Elementor?

## Key Takeaways

- The Plus Addons for Elementor allows users to add Lottie animations to the Progress Bar widget with just a few clicks.
- LottieFiles.com requires users to create a free account to copy Lottie file URLs for embedding in the Progress Bar widget.
- Users can set the Dynamic Value in the Progress Bar widget between 0% and 100% to control the animation fill.

Want to make your progress bar more interesting? You can easily add cool animated Lottie files to them. Lottie uses vector animations to make smooth graphics and motion in a small file size.

With the Progress Bar Widget from The Plus Addons for Elementor, you can add amazing Lottie animations to your progress bar with just a few clicks. 

*To check the complete feature overview documentation of The Plus Addons for Elementor Progress Bar widget, [click here.](https://theplusaddons.com/docs/progress-bar-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-progress-bar/?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 search for Icon here you’ll find all the Lottie Icons.

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

![Lottie Icons URL Copy](https://theplusaddons.com/wp-content/uploads/2024/03/Lottie-Icons-URL-Copy.gif)

Now, add the Progress Bar widget to the page and follow the steps - 

Go to the **Layout **tab

#### Layout

1. From the **Main Style **dropdown, you can select Progress Bar or Pie Chart.**

**Let’s select Progress Bar here.**

**Then, from the** Style** section, you can select a style for a progress bar.

From the **Height** dropdown, you can set the bar height according value.

2. From the **Dynamic Value** field, you have to set a value between 0% and 100% that will control how much of the progress bar is filled in.

> *Note: This number is only used for the animation and does not appear as text.*

#### Content

3. Add the progress bar **Title **and **Sub Title** as required under the** Content **tab.

#### Icon

4. From the **Select Icon** dropdown, you have to select **Lottie.

**Then **Icon Position** dropdown, you can select the Icon you want to display before the title or after the title in the progress bar.

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

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Add-Lottie-URL-7.png)

Now you should have a beautiful Lottie animation icon in the progress bar.

![Lottie Animation In Progress Bar](https://theplusaddons.com/wp-content/uploads/2024/03/Lottie-Animation-In-Progress-Bar.gif)

***Suggest Read:** [How to Create Circle Progress Bars in Elementor.](https://theplusaddons.com/docs//create-circle-progress-bars-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if my Lottie animation isn't displaying in the progress bar?**
A: If your Lottie animation isn't showing, first check that you've correctly copied the Lottie file URL from LottieFiles.com. Ensure that the URL is pasted into the Lottie URL field in the Progress Bar widget settings. If the URL is correct and it still doesn't display, verify that the Progress Bar widget from The Plus Addons for Elementor is installed and activated.

**Q: What is the best way to set the progress value for the animation?**
A: Set the Dynamic Value between 0% and 100% to control how much of the progress bar is filled. This value directly influences the animation's visual effect. Remember, this number is for animation purposes only and won't appear as text on the progress bar, so choose a value that accurately reflects the progress you want to convey.

**Q: Are there any limitations when using Lottie animations in the Progress Bar widget?**
A: One limitation is that the Lottie animations must be sourced from LottieFiles.com, as the URL needs to be copied from there. Additionally, ensure that the animations are compatible with the Progress Bar widget from The Plus Addons for Elementor to avoid display issues.