People tend to love visual content rather than text. If you want to display certain data on your website, displaying them in the circle bar is a great idea. Most web developers use jQuery to display data in circle bars. Programming knowledge is required if you want to create a circle bar with jQuery. If your website is built with WordPress, you can effortlessly create a circle bar without coding with JetElements.
JetElements is an Elementor add-on that provides unique widgets. One of which is Circle Progress, which allows you to display data in a visual form. More specifically circle bar. You can use this widget to display data or pieces of information such as website uptime, work hours, work progress, and so on.
A brief intro about Elementor
If you come to this page via a search engine and haven’t heard about Elementor before, it is a freemium page builder plugin for WordPress. You can use Elementor to create a beautiful web page without coding. You can even create a WordPress theme without coding as well. To enrich the experience of the users, Elementor supports add-on. JetElements is one of the Elementor add-ons.
How to use JetElements to create circle progress bars in WordPress
As mentioned above, JetElements has a widget called Circle Progress. You can use this widget to add circle progress bars on a webpage without coding. JetElements itself is a paid add-on (only $17). You can use the free version of Elementor to crate circle progress bars with JetElements.
Assuming you have installed Elementor and JetElements, create a new page (Pages -> Add New) and edit with Elementor by clicking the Edit with Elementor button.
You will be taken to the Elementor editor. Before getting started to create the circle bar, set the page layout by clicking the gear icon on the bottom side of the left panel. Select the layout on the Page Layout option.
Add a new section by clicking the plus button on the editor area. There are 12 structure options you can choose from. Select according to the number of columns you want to have. We use the three-column structure in this example since we want to create three circle bars on three different columns.
Add the Circle Progress widget by dragging it from the left panel to one of the columns in the editor area.
Boom! You will instantly have a circular bar. The first thing you want to do next is set the percentage number. Simply set the number on the Current Percent section.
To add the title, you open the Content option. In addition to title, you can also set the percent position, label position, as well as other setting options as you can see in the screenshot below.
To set the circle size, stroke width, background stroke width, and stroke color you can open the Settings option. There is also an option to set the animation duration here.
For more customization settings, you can switch to the Style tab on the left panel. Here, you can set things like circle fill color, progress line endings, typography and so on. You can play around to explore more setting options.
On the Advanced tab, you can make the settings of the column that holds your bar. Such as the column background, the margins, border, and so on.
Play around with the left panel until you get satisfied with the result. Repeat the steps above on other columns. If you want to add other widgets to your page, simply drag one from the left panel. Once you are done, click the PUBLISH button on the bottom side of the left panel to publish your page.
