🎯 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
Title & Tag
Add a label above the bar; choose an HTML tag like H1–H6 (or div/span/p) for semantic structure and SEO.Percentage Value
Set the numeric value (0–100) to indicate progress.Show Percentage
Toggle the display of the value text at the end of the bar.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.
