Progress Bar

Progress Bar displays a numeric progress value with a title and optional percentage label. Use it for a metric whose scale is clear to the reader.

Add and configure Progress Bar

1. Click Add, choose Progress Bar, and place it in the container.
2. Set Content > Progress Bar > Progress and Title Text.
3. Choose whether Hide Percentage should be enabled.
4. Configure Design > Progress Bar, Container, Typography, and Animation.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Progress Bar

Setting	Purpose and options	Behavior
Progress	Set progress. Range: 1–100.	Shared
Title Text	Enter the title text.	Shared
Hide Percentage	On/off.	Shared

Design > Progress Bar

Setting	Purpose and options	Behavior
Background Color	Color or supported fill.	Shared
Disable Stripes	On/off.	Shared
Border Radius	Border radius and unit.	Shared
Horizontal Padding	Horizontal padding and unit.	Responsive
Vertical Padding	Vertical padding and unit.	Responsive

Design > Container

Setting	Purpose and options	Behavior
Background Color	Color or supported fill.	Shared
Disable Stripes	On/off.	Shared
Border Radius	Border radius and unit.	Responsive
Width	Width.	Responsive

Design > Typography

Setting	Purpose and options	Behavior
Title	typography controls.	See linked controls
Percent Counter	typography controls.	See linked controls

Design > Animation

Setting	Purpose and options	Behavior
Animation Stripes	On/off.	Shared
Animation Duration	Animation duration and unit. When: Animation Stripes is set.	Shared
Animate Progress On Scroll	On/off.	Shared
Animate Once	On/off. When: Animate Progress On Scroll is set.	Shared
Transition Duration	Transition duration. When: Animate Progress On Scroll is set.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
Wrapper	spacing controls.	See linked controls
After Title	After title and unit.	Responsive

Troubleshooting