How to Use the Progress Element on Your Website

The Progress Element is perfect for displaying skills, statistics, or achievements in a visual and engaging way. It is commonly used for progress tracking, performance indicators, and skill percentages.

1. Adding the Progress Element

1. Open the Elements Panel on the left.
2. Find Progress under "Basic Elements."
3. Click, hold, and drag it to your desired section.

2. Customizing the Progress Bar

Changing Width & Height

• Click the handles on the left and right to resize manually.
• Under Settings, adjust the width in percent (%) or pixels (px).
• Set the height for a thicker or thinner progress bar.

Progress Value & Labels

• Set the fill value (e.g., 75% to show three-quarters progress).
• Choose whether to display the percentage or hide it.
• Change the title of the progress bar by typing directly into it.

Progress Bar Styles

1. Standard – Basic bar with a label inside.
2. Label on Top – Moves the percentage and title above the bar.
3. No Label – Removes text for a minimalist look.

3. Styling the Progress Bar

Typography & Colors

• Change font, size, and alignment of the title.
• Customize colors for:
• Progress Fill – The color of the completed section.
• Title Text – The label or heading above the bar.
• Background – The unfilled section of the progress bar.
• Shadow & Hover Effects – Add styling effects when hovered over.

Duplicating Progress Bars

Instead of adding multiple bars manually:

• Customize one bar fully with title, colors, and size.
• Click Duplicate to create identical progress bars.
• Update the values and titles for a quick multi-bar section.

4. Making It Responsive

• Check the Tablet & Mobile Views to ensure proper alignment.
• Resize bars and adjust text to fit smaller screens properly.
• Avoid overly thick bars on mobile for better readability.

Why Use Progress Bars?

Visual representation – Quickly communicates levels and stats.

User engagement – Encourages interaction and attention.

Customizable styles – Fits any website theme.

Responsive & flexible – Adjusts to different screen sizes.

Progress bars enhance user experience by making data more understandable and visually appealing.