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:

Step 1: Use Progress Bar

• Go to Menu Romethemekit, and you will be able to see the Progress Bar Widget.
• Click Add New Container.

• On the canvas, select your structure.

• Drag the widget from the Elementor and Drop it on the selected area.

• Showing Progress Bar.

Step 2: Customize the Progress Bar

Content

• Click Menu Content.
• Select the Progress Bar Style from the list of styles available.
• You can edit the Title & Percentage.
• Adjust the Animation Duration to show the progression.

Style General

• Click Menu Sytle → General.
• You can select the alignment, progress color, progress background color, and background color.
• Click a specific color to add another color.

Style Percentage

• Click Percentage.
• Select Font & Color as you need

Style Title

• Select Title.
• Select Font & Color as you need.
• You can Setting Spacing in the padding and margin column.