Progress Bar Widget

🎯 Purpose

Use this widget to add animated and customizable progress indicators to showcase completion levels, skills, statistics, or steps visually on your page.

🛠️ Content Settings

1. Title & Tag
   Add a label above the bar; choose an HTML tag like H1–H6 (or div/span/p) for semantic structure and SEO.

2. Percentage Value
   Set the numeric value (0–100) to indicate progress.

3. Show Percentage
   Toggle the display of the value text at the end of the bar.

4. Inner Text
   Optionally include text inside the bar (e.g., “Loading”, “75% Complete”).

🎨 Style Customization

Progress Bar Style

• Bar Color: Choose the fill color.

• Background Color: Set the unfilled portion’s background.

• Inner Text Color: Define the text color displayed inside the bar.

Title Styling

• Text Color: Customize the title’s color.

• Typography: Adjust font settings like family, size, weight, and spacing.

⚙️ Advanced Styling

• Access the Advanced tab for layout controls such as margin, padding, and positioning.

• Apply entrance animations, motion effects, custom CSS classes, and set responsive visibility.

✅ Best Practices

• Keep values between 0–100 to reflect true progress.

• Choose contrasting bar and background colors for clear readability.

• Display percentages sparingly—if the visual alone is sufficient, consider hiding the numeric label.

• Style titles consistently for visual harmony across multiple bars.

• Ensure accessibility and semantic markup by choosing the right HTML tag.

• Use subtle animations to draw attention without distracting users.

In essence, the Progress Bar widget lets you visually and dynamically represent completion or skill levels with full control over content, style, and responsiveness.