feature: Add Progress Bar to Toasts

[sahilatahar]

Enhance the react-fox-toast by adding a progress bar that visually indicates the duration before the toast disappears. This will improve user experience by giving a clear indication of how long the toast will remain visible.

Feature Requirements:

• Add a progress bar that fills up based on the toast's lifespan.
• Allow customization of progress bar styles (e.g., color, thickness, position).
• Ensure compatibility with different toast types (success, error, warning, etc.).
• Provide an option to disable the progress bar if not needed.
• Ensure smooth animations and performance optimization.

Possible Implementation:

• Use CSS animations or JavaScript-based timing to animate the progress bar.
• Allow configuration via props (e.g., showProgress: boolean, progressColor: string).
• Consider positioning the progress bar on top, bottom, or inside the toast.

References:

• Look at similar libraries like react-toastify for implementation ideas.

Priority: Medium
Labels: Enhancement, UI/UX

Would you like me to draft a PR template for this issue? 🚀

[sanjayc208]

@sahilatahar Now that sounds like a good discussion to have as a feature 🍀

Let's pull @perisicnikola37 also to this

Let’s see what you all think of this feature. It’s something I had in mind while building, but I’ve still been curious if developers actually use it in their projects. React-toastify, for example, is a great library and one of the first customizable toast options for developers. There are also highly popular libraries like react-hot-toast or Sonner, which don’t include this feature. I’m wondering if developers genuinely need this feature, or if it’s more of a nice to have addition.

If you guys think it’s something worth having, maybe some research, blogs, or a list of developers who are requesting this could help validate the demand. If there’s enough support for it, We will definitely make it happen!