Scroll Progress

Scroll Progress visualizes how far a visitor has scrolled through the page or a selected area. Use it as supporting feedback on a long article.

Add and configure Scroll Progress

1. Click Add, choose Scroll Progress, and place it in the container.
2. Choose Content > Tracker > Type and whether to Show Percentage.
3. Set Track Progress Of. Supply Custom Selector when the selected mode requires a specific target.
4. Configure Design > Tracker, Container, and Spacing.
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 > Tracker

Setting	Purpose and options	Behavior
Type	Line, Circle.	Shared
Show Percentage	On/off.	Shared
Track Progress Of	Page, Custom Selector.	Shared
Custom Selector	Enter the custom selector. When: Track Progress Of = Custom Selector.	Shared

Design > Tracker

Setting	Purpose and options	Behavior
Circle > Size	Size and unit. When: Type = Circle and Type = Circle.	Shared
Circle > Padding	Padding. When: Type = Circle and Type = Circle.	Shared

Shown when Type = Circle.

Setting	Purpose and options	Behavior
Circle > Background > Color	Color or supported fill.	Shared
Circle > Background > Border Color	Color or supported fill.	Shared
Circle > Background > Border Width	Set the numeric border width value.	Shared
Circle > Progress > Border Color	Color or supported fill.	Shared
Circle > Progress > Border Width	Set the numeric border width value.	Shared

Shown when Type ≠ Circle and Type ≠ Circle.

Setting	Purpose and options	Behavior
Line > Background > Color	Color or supported fill.	Shared
Line > Background > Padding	spacing controls.	See linked controls
Line > Background > Borders	borders controls.	See linked controls

Setting	Purpose and options	Behavior
Line > Progress > Color	Color or supported fill. When: Type ≠ Circle and Type ≠ Circle and Type = Line.	Shared
Line > Progress > Height	Height. When: Type ≠ Circle and Type ≠ Circle and Type = Line.	Shared
Line > Progress > Borders	borders controls. When: Type ≠ Circle and Type ≠ Circle.	See linked controls
Direction	Left, Right, Both.	Shared
Percentage > Typography	typography controls. When: Show Percentage is set.	See linked controls
Percentage > Align	Left, Right. When: Show Percentage is set and Type ≠ Circle.	Responsive
Percentage > Space After	Space after and unit. When: Show Percentage is set and Type ≠ Circle.	Responsive

Design > Container

Setting	Purpose and options	Behavior
Sticky	On/off.	Shared
Offset X	Offset x and unit. When: Sticky is set or Type = Circle.	Responsive

Shown when Sticky is set.

Setting	Purpose and options	Behavior
Offset Y	Offset y and unit.	Responsive
Vertical Align	Top, Center, Bottom.	Shared
Horizontal Align	Left, Center, Right.	Shared

Setting	Purpose and options	Behavior
Width	Width. When: Type ≠ Circle.	Responsive

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls. When: Sticky is unset.	See linked controls

Troubleshooting