Content Controls
Tracker
This section provides controls to customize how the scroll progress is tracked and displayed. You can choose the type of tracker, decide to show progress as a percentage, and select the specific element or area whose progress you want to track.
- Type – Choose the style of the progress tracker (e.g., line or circle).
- Show Percentage – Toggle to display the scrolling progress as a percentage.
- Track Progress Of – Select the page element that the scroll progress tracker will monitor (like the entire page or a specific section).
- Custom Selector – Enter a custom CSS selector to track a specific element’s scroll progress. This option is available only when ‘Track Progress Of’ is set to ‘custom’.
Design Controls
Tracker
Design the appearance of your scroll progress tracker, with options for circle or line styles, including size, padding, background, and more.
- Circle – Customize the circle tracker’s design. This set of options is available only when ‘Type’ is set to ‘circle’.
- Size – Adjust the size of the circle tracker.
- Padding – Set the padding inside the circle tracker.
- Background – Style the background of the circle tracker, including color and border options.
- Color – Choose a color for the background.
- Border Color – Set the border color for the background.
- Border Width – Adjust the border width.
- Progress – Design the progress indicator within the circle.
- Border Color – Pick a color for the progress border.
- Border Width – Set the width of the progress border.
- Line – Configure the design of the line tracker. Available only when ‘Type’ is not set to ‘circle’.
- Background – Style the background of the line tracker, with options for color and padding. Available when ‘Type’ is not ‘circle’.
- Color – Select a color for the background.
- Padding – Customize the padding around the line tracker.
- Padding – Adjust the padding values for the line tracker’s background.
- Borders – Style the borders of the line tracker’s background.
- Radius – Set the border radius for rounded corners.
- Styling – Choose border styles and colors.
- Shadow – Add a shadow effect to the borders.
- Progress – Design the progress bar of the line tracker. Available when ‘Type’ is set to ‘line’.
- Color – Pick a color for the progress bar.
- Height – Adjust the height of the progress bar.
- Borders – Customize the borders of the progress bar.
- Radius – Set the border radius for the progress bar.
- Styling – Choose styles and colors for the progress bar borders.
- Shadow – Add a shadow to the progress bar borders.
- Direction – Choose the direction in which the tracker progresses (e.g., top to bottom, left to right).
- Percentage – Customize the display of the scroll percentage. This section is available only when ‘Show Percentage’ is enabled.
- Typography – Style the typography of the percentage text.
- Align – Align the percentage text within its container. Available when ‘Type’ is not ‘circle’.
- Space After – Set the space after the percentage text. Available when ‘Type’ is not ‘circle’.
Container
Control the positioning and alignment of your scroll tracker within the page, with options for making it sticky and adjusting its offsets and alignment.
- Sticky – Toggle to make the scroll tracker stick to a fixed position while scrolling.
- Offset X – Adjust the horizontal offset of the tracker. Available when ‘Sticky’ is enabled and ‘Type’ is ‘circle’.
- Offset Y – Modify the vertical offset for the sticky tracker.
- Vertical Align – Choose the vertical alignment for the tracker. Available when ‘Sticky’ is enabled.
- Horizontal Align – Set the horizontal alignment for the tracker. Available when ‘Sticky’ is enabled.
- Width – Adjust the width of the tracker container. Available when ‘Type’ is not ‘circle’.
Spacing
Adjust the margin settings to position the scroll progress tracker appropriately within your page layout.
- Margin Top – Set the top margin to control the space above the tracker.
- Margin Bottom – Define the bottom margin to manage the space below the tracker.
