30-Days-Of-CPP icon indicating copy to clipboard operation
30-Days-Of-CPP copied to clipboard

Published 20 hours ago • verified publisher icon subhadipbhowmik

Added "Scroll Down Progress Bar" To The website

Open Tejashri-Taral opened this issue 6 months ago • 4 comments

Hey @subhadipbhowmik , closes issue #515

I have added scroll progress bar into the website. what I did-

  • Styled the Progress Bar: Used inline CSS to position the progress bar at the top of the viewport and style it.
  • Added the Progress Bar Element: Included a div element in your JSX with an ID that will be targeted by the JavaScript code.
  • Implemented Scroll Tracking: Used React’s useEffect hook to handle the scroll event and update the width of the progress bar dynamically as the user scrolls.

Video/Screenshot:

https://github.com/user-attachments/assets/63f83ae9-6e24-4716-a165-8cd78b1a30d0

Please take a look and review it.

Tejashri-Taral avatar Aug 05 '24 19:08 Tejashri-Taral