ToolkitSuitePopupProgress Bars
Features

Progress Bars

Progress bars give visitors a visual indicator of how far along they are in a multi-step process. They create a psychological push to complete the next step — people are more likely to finish something when they can see how close they are.

!Progress bar example

---

Adding a Progress Bar

  1. Open the Widget Editor.
  2. Go to Elements and find the Progress Bar icon.
  3. Drag and drop it onto your widget canvas.

---

Customization

Once placed, configure the progress bar to match your widget's design and purpose:

!Progress bar customization

  • Colors — set the fill color (completed portion) and the track color (remaining portion).
  • Text — add a label or percentage display inside or near the bar.
  • Animation — enable a smooth fill animation when the bar first appears.
  • Completeness percentage — set how full the bar appears on each screen (e.g., 33% on step 1, 66% on step 2, 100% on step 3).
  • Shape — choose between rounded or square ends for the bar.
  • Sizes — adjust the height and width of the bar to fit your layout.

!Progress bar styles

Use progress bars on multi-step quiz widgets, survey flows, or any widget with multiple screens to keep visitors oriented and motivated.

---

Need more help?

If you've worked through this and still need a hand, contact support — we'll dig in with you.