---
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-09-27
lang: en
author: "Aditya Sharma"
description: "Want extra motion next to your progress bar instead of a static icon? You can use an animated Lottie file. This doc covers the Lottie option specifically - see the..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-To-Add-Lottie-Animation-In-Infobox-Elementor_-1-1024x536.jpg
word_count: 246
---

# How To Add Lottie Animation In Progress Bar Elementor?

## 

- Progress Bar is a free widget in The Plus Addons for Elementor and works with Elementor (free) installed and active, with no Pro licence required.
- The Plus Addons > Widgets lets a user search for Progress Bar and turn its toggle on before adding the widget to a page.
- Lottie support uses a public Lottie JSON file URL, such as one from LottieFiles.com, then Select Icon changes to Lottie and the URL goes into the Lottie URL field.

Want extra motion next to your progress bar instead of a static icon? You can use an animated Lottie file.

This doc covers the Lottie option specifically - see the Settings Overview for every other option.

For the full settings tour of the **Progress Bar** widget, see [How to Add Progress Bar in Elementor WordPress?](https://theplusaddons.com/docs/progress-bar-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/progress-bar/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Edition:** Progress Bar is a **free** widget - it works with just The Plus Addons for Elementor installed, no Pro licence required.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Progress Bar** and turn its toggle on.

## Steps

- Get a Lottie JSON file URL, for example from [LottieFiles.com](https://lottiefiles.com/).- Add the **Progress Bar** widget to the page.- From **Select Icon**, choose **Lottie**.

- Paste the Lottie JSON URL into the **Lottie URL** field that appears.

![Lottie URL field with a Lottie JSON link pasted in](https://theplusaddons.com/wp-content/uploads/2026/09/progress-bar-lottie-url.webp)

## Limitations

- Requires a Lottie JSON file hosted at a public URL - there is no built-in file picker for Lottie files here.

## Not verified

So you know exactly what has and has not been checked:

- The Lottie animation actually playing on the front end (as opposed to the control being present and correctly gated) was not click-tested with a real Lottie URL in this pass.

## Related Docs

- [How to Add Progress Bar in Elementor WordPress?](https://theplusaddons.com/docs/progress-bar-settings-overview/)- [How to Create Circle Progress Bars in Elementor?](https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a Lottie animation to the Progress Bar widget in Elementor?**
A: Elementor free must be installed and active, and the Progress Bar widget from The Plus Addons for Elementor has to be enabled under The Plus Addons > Widgets. The widget is free, so no Pro licence is required. That matters because the Lottie option only appears inside the Progress Bar widget once the addon is active and the widget is turned on.

**Q: How do I add a Lottie animation to a progress bar in Elementor?**
A: The workflow is simple: get a Lottie JSON file URL, add the Progress Bar widget to the page, choose Lottie from Select Icon, then paste the JSON URL into the Lottie URL field. The key detail is that this tutorial is only about the Lottie option, not every Progress Bar setting. For the full widget setup, see [How to Add Progress Bar in Elementor WordPress?](https://theplusaddons.com/docs/progress-bar-settings-overview/).

**Q: Why is my Lottie animation not showing in the Progress Bar widget?**
A: The most common blocker here is the file source. This setup requires a Lottie JSON file hosted at a public URL, and there is no built-in file picker for Lottie files in this control. If the URL is not public or not a JSON file, the widget has nothing it can load. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH exposes the field, but the file still has to be reachable from that URL.

**Q: Can I use any Lottie file with the Progress Bar widget?**
A: Only a Lottie JSON file hosted at a public URL fits this setup. The page specifically points to getting a JSON URL from a source like LottieFiles.com, which makes this better for hosted assets than local uploads. That limitation matters because there is no built-in file picker here, so the widget depends on an accessible web address rather than an internal media selection flow.

**Q: Is there another way to add motion next to a progress bar besides using Lottie?**
A: This tutorial only covers replacing the static icon with an animated Lottie file inside the Progress Bar widget. For other Progress Bar options, the page sends you to [How to Add Progress Bar in Elementor WordPress?](https://theplusaddons.com/docs/progress-bar-settings-overview/). If you want a different style of progress display altogether, [How to Create Circle Progress Bars in Elementor?](https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/) is the related doc listed here.

**Q: What should I know before relying on this Lottie progress bar setup on a live site?**
A: One important caveat is that front-end playback was not click-tested with a real Lottie URL in this pass. That means the control path was covered, but actual animation playback on the live page was not verified here. The practical takeaway is that you should treat this as a setup guide for enabling the option in The Plus Addons for Elementor and confirm your own hosted JSON behaves correctly on your site.