Elementor has a native Progress Bar widget that you can use to add elements like skill level or progress of something to the page/template you are creating. When using this widget, you can customize its look by changing the color and the typography of the text. This widget only allows you to use a solid color for the bar.
Is it possible to create a progress bar with a gradient color?
If you have a CSS skill, you can use the pro version of Elementor and add a custom CSS to the Progress Bar widget to create a gradient progress bar. Otherwise, you can install an add-on that offers a progress bar widget in which allows you to choose a gradient color when changing its color. Two add-ons that offer such a widget are Essential Addons and JetElements.
Creating a gradient progress bar in Elementor using Essential Addons
Essential Addons is one of the most popular Elementor add-ons. It offers more than 60 widgets, including a Progress Bar widget that you can use to create a gradient progress bar. Essential Addons is a freemium add-on. The Progress Bar widget is available on the free version. You can download the free version of this add-on on the official plugin directory of WordPress.
After installing and activating the Essential Addons, create a new page or template and edit it with Elementor and drag the Essential Addons’ Progress Bar widget to canvas.
Select the progress bar style you want to create from the dropdown menu on the Layout option. There are 7 progress bar styles you can choose from. To create a gradient progress bar, you need to select the Line style.
Set the title, counter value, and animation duration. Once done, switch to the Style tab and open the Fill block. On the Background Type option, select Gradient and set first color and the second color. You can also set the gradient type (linear or radial), location and the angle.
You can open other option blocks on the Style tab to set more styling options.
Creating a gradient progress bar in Elementor using JetElements
Unlike Essential Addons which is released as a freemium add-on, JetElements is released as a premium add-on. So, you need to make a purchase to download it. You can download JetElements on the Crocoblock website. Crocoblock is the developer of JetElements. JetElements costs $19 per year. Alternatively, you can get JetElements with a one-time purchase option on the Jupiter X theme and Monstroid2 theme.
After installing and activating JetElements, create a new page or template and edit it with Elementor. Drag the JetElements’ Progress Bar widget to the canvas area.
Set the progress bar type from the dropdown menu on the Type option. Also set the set title as well as the percentage.
Go to the Style tab to style up the progress bar. On the Progress Bar block, set the background type of the status bar to gradient and set the first color as well as the second color. Also set the location, gradient type (linear or radial), and angle.
You can open other option blocks on the Style tab to set more styling options.
