Progressbar implemented

[srishti023]

Description

This PR implements a responsive progress bar with a bluish-to-yellowish gradient that visually represents the user's scroll progress on the webpage. The gradient adds a modern and dynamic feel to the UI, smoothly transitioning as the user scrolls. The progress bar adapts well to different screen sizes, ensuring a consistent and appealing user experience across devices.

• This PR does the following:
  • Adds Bluish-to-yellowish gradient for a visually striking look.
  • Smooth animation reflecting scrolling progress.
  • Responsive design that adjusts based on screen size.

Related Issues

Link any related issues using the format Fixes #511.
This helps to automatically close related issues when the PR is merged.

• Placeholder: "Fixes [Feature Request]: Missing Progress Bar and Hamburger Functionality on Pages #511"

Changes

List the detailed changes made in this PR.

• Added a new feature to implement a scroll progress bar that tracks the user's scroll activity and displays it as a bluish-to-yellowish gradient.
• Refactored the existing layout CSS to ensure proper responsiveness for the progress bar across all screen sizes (mobile, tablet, desktop).
• Enhanced the scrolling animation for a smoother transition effect when the progress bar updates as the user scrolls.

Testing Instructions

Detailed instructions on how to test the changes. Include any setup needed and specific test cases.

1. Pull this branch.
2. Run npm install to install dependencies.
3. Run npm test to execute the test suite.
4. Verify that ...

Screenshots (if applicable)

Add any screenshots that help explain or visualize the changes.

Online.Book.Sales.-.Google.Chrome.2024-10-20.11-14-49.mp4

Additional Context

Any additional context or information that reviewers should be aware of.

• This PR is based on the following...

Checklist

Make sure to check off all the items before submitting. Mark with [x] if done.

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I am working on this issue under GSSOC

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Suman373]

@srishti023 Nice work !

[Trisha-tech]

Description

This PR implements a responsive progress bar with a bluish-to-yellowish gradient that visually represents the user's scroll progress on the webpage. The gradient adds a modern and dynamic feel to the UI, smoothly transitioning as the user scrolls. The progress bar adapts well to different screen sizes, ensuring a consistent and appealing user experience across devices.

• This PR does the following:

  • Adds Bluish-to-yellowish gradient for a visually striking look.
  • Smooth animation reflecting scrolling progress.
  • Responsive design that adjusts based on screen size.

Related Issues

Link any related issues using the format Fixes #511. This helps to automatically close related issues when the PR is merged.

• Placeholder: "Fixes [Feature Request]: Missing Progress Bar and Hamburger Functionality on Pages #511"

Changes

List the detailed changes made in this PR.

• Added a new feature to implement a scroll progress bar that tracks the user's scroll activity and displays it as a bluish-to-yellowish gradient.
• Refactored the existing layout CSS to ensure proper responsiveness for the progress bar across all screen sizes (mobile, tablet, desktop).
• Enhanced the scrolling animation for a smoother transition effect when the progress bar updates as the user scrolls.

Testing Instructions

Detailed instructions on how to test the changes. Include any setup needed and specific test cases.

1. Pull this branch.
2. Run npm install to install dependencies.
3. Run npm test to execute the test suite.
4. Verify that ...

Screenshots (if applicable)

Add any screenshots that help explain or visualize the changes.

Online.Book.Sales.-.Google.Chrome.2024-10-20.11-14-49.mp4

Additional Context

Any additional context or information that reviewers should be aware of.

• This PR is based on the following...

Checklist

Make sure to check off all the items before submitting. Mark with [x] if done.

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I am working on this issue under GSSOC

Kindly resolve these conflicts @srishti023

[srishti023]

@Trisha-tech please check

[srishti023]

Please merge my PR

[Suman373]

@Trisha-tech you may verify and merge this