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 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.
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.
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.
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.
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.
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.
Step 3 — Then, move to the Content > Values block. The Circle Progress widget can showcase not only percents but also absolute values.
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.
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.
That’s it! Create a web page of your dream with the JetElements plugin easily!