Back to contents

JetElements: How to Use Progress Bar and Circle Progress Widgets

This tutorial aims to show the customization of JetElements Progress Bar and Circle Progress widgets for Elementor.

Let’s imagine you need to describe the service you provide. For example, you produce jewelry items and need to specify the time it will take to create the particular one, the difficulty, and the uniqueness under every single article. In this case, the JetElements Progress Bar widget comes to the rescue.

Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, progress, use them to compare several items, etc.

Creating a Progress Bar

1 Step — Add the widget to the page

Firstly, find the Progress Bar widget in the Elementor page builder. Then, drag and drop it into a new section on your web page.

Progress Bar widget

The Progress Bar widget will add a single bar to the page. You will have to do all the settings again for each new bar, so the best way to do the bunch of bars is to customize one and then duplicate it.

Single progress bar item

2 Step — Set the plugin up

Consequently, open the Content > Progress Bar block, and in the Type section choose what your progress bar should look like. There are several types of the progress bar layouts, like vertical or horizontal layout, and different positioning for the content that comes with the progress bar.

Input the Title and pick an appropriate Icon from the library or upload the SVG file. Afterward, move on to the Percentage section, where you should specify the state of the progress bar you’re currently editing.

Progress Bar settings

Go forward to the Style > Progress Bar block, where you can specify the progress bar height and width. When it comes to the background type and the status bar, you can make them classic, gradient, or upload an image. If you use an image, pay attention to the Attachment block, where you can choose the Fixed option. After that go to the Title block and customize the icon and the title to make them eye-catching. And in the Percent block style up the percent digits. This is how your progress bars block could look like:

Example of a progress bar

Adding a Circle Progress

1 Step — Drop the Circle Progress widget to the page

First of all, find the Circle Progress widget in the Elementor page builder. Afterward, drag and drop it into a new section which consists of four sub-sections.

Circle Progress widget

This widget also adds a single circle progress bar only. That’s why you have to choose the layout of the section first, and then fill it with the widgets.

single circle progress bar item

2 Step — Do the customization

Open the Content > Values block. The Circle Progress widget can showcase not only percents but also absolute values and you can choose that in the Progress Values Type drop-down menu. And the number of percent shown by the circle bar is set with the help of the Current Percent slider.

Circle Progress Value section

Now, open the Content > Content section. Here you can choose the Value Number Prefix and Value Number Suffix, as well as define if to Show Thousands Separator in Value. Afterward, input the title and subtitle in the Counter Title and Counter Subtitle sections and decide, where you want the percent to be placed: either inside or outside the circle. The same with the label. To define its position navigate to the Label Position option.

Circle Progress content section

In the Content > Settings section you can specify the Circle Size, the Value Stroke Width, and the Background Stroke Width. Play with the values to choose the combination that will fit your requirements.

Circle progress settings section

Additionally, you can select the Background Stroke Type and Color and Value Sktoke Type and Color. The Animation Duration feature defines how smoothly the circle progress bar animation will work. The lesser is the number in this field – the faster the animation will be performed.

Circle progress settings section

The last step is to design the Circle Progress widget. Move to the Style block and change the style settings according to your needs.

Example ofthe circle progress bar

That’s it! Create a web page of your dream with the JetElements plugin easily!