How To Add Lottie Animation In Progress Bar Elementor?

Updated on June 24, 2024 by Editorial Team
Table Of Content

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.

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

First, go to 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

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

Go to the Content tab

Progress Bar

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

Let’s select Progress Bar here.

Then from the Progress Bar Style dropdown, you can select a style for a progress bar.

From the Progress Bar Height dropdown, you can set the bar height.

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.

3. Add the progress bar title and sub title as required.

Progress bar content

Icon

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

Then Icon Title Before after 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.

Progress bar past lottie url how to add lottie animation in progress bar elementor? From the plus addons for elementor

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

Lottie animation in progress bar
OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X