Progress Bar Widget
Display progress with customizable bar and stripe styles.
Use the Progress Bar widget to show completion status or milestones.
Add a Progress Bar widget
1
Open the widget picker
In the page editor, open Widgets.
2
Drag Progress Bar
In Content, drag Progress Bar (progress icon) onto the page.
3
Open Progress Bar Settings
Click the widget and choose Progress Bar Settings.
Progress Bar Settings
The dialog has two tabs: Progress and Border.
Progress tab
- Progress Bar and Background colors
- Progress Value
- Bar Width
- Bar Height
- Stripe Direction: None, Left, Right
- Stripe Speed: None, Slow, Fast
Border tab
- Alignment
- Border Radius
- Shadow
Toolbar actions
- Progress Bar Settings
- Alignment
- Animation
- Position
- Copy
- Delete
Related Help Docs
Updated Jan 7, 2026
Was this helpful?