[FEATURE] Add a Scroll Progress Indicator #1178

Is your feature request related to a problem? Please describe.

Users currently have no visual indication of how much content they have read or how far they have progressed through a page. This can make navigation difficult, especially on pages with lengthy content.

Describe the solution you'd like

Implement a Scroll Progress Indicator that visually displays the user's reading or scrolling progress on the page. The indicator should update dynamically as the user scrolls.

Suggested Features

• A thin progress bar positioned at the top of the page.
• Real-time updates based on the user's scroll position.
• Smooth animation for progress changes.
• Responsive design that works across all devices.
• Colors and styling consistent with the website's design system.
• Minimal impact on page performance.

Describe alternatives you've considered

• Displaying a percentage value instead of a progress bar.
• Using a circular progress indicator.
• Providing no visual feedback and relying solely on the browser scrollbar.

Additional Context

A scroll progress indicator enhances user experience by helping visitors understand how much content remains on a page. This feature is especially useful for blogs, documentation pages, articles, and long-form content.

Acceptance Criteria

• A scroll progress indicator is added to the website.
• The indicator accurately reflects the user's scroll position.
• The progress updates smoothly while scrolling.
• The indicator is visible and responsive across all screen sizes.
• The design matches the existing UI/UX theme of the project.
• The implementation does not negatively impact page performance.
• The feature is tested across major browsers.

Labels

gssoc'26 enhancement frontend UI/UX good-first-issue