How to Use & Customize Progress Bar Widget

You can use the Progress Bar Widget to build a UI that shows the downloading/uploading of files, sales this week, hours spent, overall score, etc.

Follow the step-by-step instructions:

1. Go to Menu Romethemekit.

2. And you will be able to see the Progress Bar Widget.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor.

7. Drop it on the selected area.

8. Setting Content :

• Click Content → Content.
• Select your Progress Style.
• Setting your content here.

9. General Style (used to customize the general style) :

• Click Style → General.
• Customize the progress and background color, size, padding, radius and height.

10. Percentage Style (used to customize the percentage style) :

• Click Style → Percentage.
• Customize the typography, color and background color percentage, position, padding, margin, radius, and border.

11. Title Style (used to customize the title style) :

• Click Style → Title.
• Customize the typography, title color, padding and margin.

12. Don’t forget to click Publish to save the changes.