Progress Bar

The Progress Bar widget lets you visually showcase skills, completion levels, or project milestones using animated progress indicators. This widget is perfect for portfolios, resumes, performance charts, or any visual metric.

🧩 How to Enable the Widget

1. Go to your WordPress dashboard.
2. Navigate to Topper Pack > Widgets.
3. Toggle the switch to enable the Progress Bar widget.
4. Once enabled, it will be available inside the Elementor editor under the Topper Pack section.

1. Drag & Drop the Widget

• Navigate to Elementor’s widget panel.
• Search for Progress Bar.
• Drag it into your design area.

⚙️ Content Tab Settings

➤ Choose Style

• Select your preferred progress bar layout (e.g., single bar, stacked style).
• Style selection determines how multiple bars display.

➤ Title

• Input the skill or metric name (e.g., Photoshop, HTML, Sales Target).

➤ Percentage

• Set the numeric progress value (0 to 100).
• This value controls the fill level of the bar.

➤ Number Position

• Static – the percentage number stays in place.
• Moving – the percentage number moves with the animation.

🎨 Style Tab Settings

🔹 Progress Bar

• Width – adjust the full width of the bar.
• Alignment – set left, center, or right alignment.
• Box Height – control the thickness of the progress bar.
• Background Type – choose solid, gradient, or image.
• Box Shadow – apply shadows for depth.
• Border Type & Radius – define borders and roundness.

🔹 Inner Progress Bar

• Color or Gradient – set the inner bar’s fill color or gradient.
• Image Fill (optional) – use an image as the fill of the progress bar.
• Border Radius, Margin, Padding – fine-tune spacing and shape.

🔹 Typography (from the Content section)

• Adjust font, size, and spacing for the title and percentage text.

📝 Example Use Cases

• Show proficiency in skills (HTML – 90%)
• Display team targets (Project Alpha – 75% Complete)
• Represent system stats (CPU Usage – 60%)