This is a versatile 3-in-1 scroll tracking component that monitors user scroll progress and displays it in different formats: as a circular progress indicator, as a percentage text, and by showing the current active heading.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the component code into your Framer project file.
Unlink the component and configure each of the three components seperately
Optional - Configure the section tracking by entering a section ID if you want to track a specific section rather than the entire page.
Customize the appearance by adjusting colors, sizes, and fonts for each display mode.
Set the reference point (top, middle, or bottom of viewport) to determine how scroll progress is calculated.
Position the component where you want it to appear on your page - typically fixed in the bottom for continuous visibility.
The component offers three display modes that can be toggled and customized independently:
Circular Progress: Shows scroll progress as a circular indicator
Text Progress: Displays scroll percentage as text
Current Heading: Shows the heading currently in view
Each mode has specific properties including colors, sizes, reference points, and font styling to match your design.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
