Section Progress Bar
This component is a scroll-based section progress bar designed for long, multi-section websites.
Make it with Workshop
Build your own component with AI
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
