Section Progress Bar

About this component

This component is a scroll-based section progress bar designed for long, multi-section websites. As the page is scrolled, the bar updates to indicate the current section and overall completion. Each segment corresponds to a specific section, providing a clear view of both progress and position within the content. It improves orientation and navigation, especially on content-heavy pages where visual feedback helps convey how much has been covered and what remains.

This component can be customized using these properties:

• Background color: Adjust the background color of the container.

• Background blur: Apply a blur effect for visual depth.

• Border color: Set the border color or remove it entirely.

• Radius: Control the corner rounding of the bar.

• Padding: Adjust spacing inside the component (top, right, bottom, left).

• Gap: Define the spacing between section markers.

• Section links: Assign an anchor link to each section (1–5).

• Section labels: Customize the label text for each section (1–5).

Ideal for

• Case studies

• Portfolios

• Product features

• Editorial sections

• Collections

Support

• All sales are final. Refunds are only provided if the component does not work as described and the issue cannot be resolved. Please reach out within 7 days of purchase if you encounter a technical problem.

• For any questions and help setting up the component, contact hello.lilyfigueras@gmail.com