Progress bar never reaches full width

[gregorybolkenstijn]

You can see this happening in the demo: https://react-transition-progress.vercel.app/

The bar never reaches full width, it just disappears halfway. A common pattern for progress bars is to become full width before disappearing. You can see this happening in popular progress bar packages like:

• https://ricostacruz.com/nprogress/
• https://kimmobrunfeldt.github.io/progressbar.js/

Edit: I see the demo in the linked article has the same behaviour: https://buildui.com/posts/global-progress-in-nextjs

[timneutkens]

Feel free to investigate/change this, it'll probably need to exit animate to 100% then opacity 0. Framer-motion probably has something for this, but while you're at it you can maybe also have a look into #1 to remove framer-motion completely 👍

[AF1QUE]

@timneutkens Thanks for putting it out here; I would very much appreciate it if you could explain how I can make the progress bar complete full width. 🙏

[timneutkens]

I don't know 😄 That's why it has to be investigated 🙂

[ventsislavnikolov]

Hi guys, just quick check and found out that 750 delay is too much for the random difference that is created. I manage to almost fully set perfect page load/page transition with changing the delay in useInterval from 750 to 10 and change the both random from (1, 10) and (1,5) to (1, 20) and (1, 10). This whay in my project (only using Link transation) is almost perfect loader.

[michaellopez]

@AF1QUE maybe you can test out my PR?

[AF1QUE]

@AF1QUE maybe you can test out my PR?

Thank you so much for replying, I've started using next-nprogress-bar package after last time of failing to make it work. I will definitely get back to your PR in the future.