Suppose you are a Divi Builder user and want to show the data in a graphical design on your website. Luckily Divi has a Bar Counters module to support that. The Divi Bar Counters module lets you easily display numerical information on your website. It’s the best choice to present data in percentage forms, such as growth metrics, company statistics, numerical goals, etc.
This article might be helpful for you if you want to customize your progress bars more than Divi has provided on the Divi Bar Counters module. We will show you how to create the gradient progress bar in Divi Builder.
Steps to Create the Gradient Progress Bar in Divi
Step 1: Add the Bar Counters Module
Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Bar Counters module, and insert that module into the column. Once you add the Bar Counters module, you can edit and style up.
Step 2: Add the CSS Snippet
Once you add, edit and style up your Bar Counters module, we will add a gradient to each progress bar by adding the CSS snippet.
Go to the Bar Counter Settings on the module settings by clicking the gear icon (⚙️), then navigate Advanced tab –> Custom CSS.
Once you enter the Custom CSS section, navigate to the Counter Amount. Afterward, copy the CSS snippet below and paste it into the Counter Amount field.
background: radial-gradient(circle, rgb(108,28,108) 16%, rgb(13,106,238) 70%);
Note: The CSS Snippet we gave you above is one example of CSS gradients you can use. You can create it by yourself using CSS gradient online tools. Click here to see some CSS gradient tools that we recommend. Once you finish creating the gradient, copy the CSS and paste it into the Counter Amount field.
That’s it. You can repeat the steps above if you have others’ progress bars. Don’t forget to save or publish your project if you want to.
The Bottom Line
This article shows how easily you can create a gradient progress bar in Divi builder. The progress bar with a single color may look plain and boring. But be careful about making a multi-color gradient to your progress bar. Please pay attention to blending and mixing your color tones so that your progress bar doesn’t look weird and annoying. Because the primary purpose of creating the progress bar is to show the data, ensure the progress bar is clear and understandable to your users.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access from any website you create.
