Back to contents

How to display the progress on Elementor-built pages with JetElements 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, JetElements Progress Bar widget comes to the rescue.

Progress Bar widget

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

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

Progress Bar widget

Step 2 — 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.

Step 3 — In the Title field input the first feature, e.g. the difficulty.

Content settings in Progress Bar widget

Step 4 — Move on to the Percentage section, where you should specify the state of the progress bar you’re currently editing.

Step 5 — Pick an appropriate icon from the Icon dropdown list.

Step 6 — 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.

Style settings in Progress Bar widget

Step 7 — Go to the Style > Title block and customize the icon and the title to make them eye-catching.

Step 8 — In the Percent block style up the percent digits.

Adding a Circle Progress

This widget for Elementor suits for displaying the progress in percentages or in absolute values. It has lots of style settings and is easy to use! Follow the steps below to see how you can use the Circle Progress widget to add the visualization to your web pages.

Circle Progress widget

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

Circle Progress widget

Step 2 — After that, open the Content > Content block to input the title in the Counter Title section 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.

Content settings in Circle Progress widget

Step 3 — Then, move to the Content > Values block. The Circle Progress widget can showcase not only percents but also absolute values.

Values settings in Circle Progress widget

Step 4 — Go to the Content > Settings block, where you can specify the Circle Size, the Value Stroke Width, the Background Stroke Width and the Animation Duration.

Setting in Circle Progress widget

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

Style settings in Circle Progress widget

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