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.
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.
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.
Now you should have a beautiful Lottie animation icon in the progress bar.
Suggest Read: How to Create Circle Progress Bars in Elementor.
