Is there a way to keep the bar at the top without it disappearing at progress = 100?

[dilizarov]

Currently hacking it by replacing 100 with 99.99999 progress instead.

[rohan8538]

onLoaderFinished={() => setProgress(0)

I think removing this part from the code should work. Do let me know here if that works for you.

[pythonpioneer]

Hi @rohan8538, the approach you told us above will not work, because the source code forces it to happen, we can see in this source code.

Instead of this, you (@dilizarov) can do some styling based on progress

<LoadingBar
    color='#f11946'
    progress={progress}
    style={progress === 100 && { width: '100%' } }
/>

This is not the best approach instead we can have an option to fade the loading bar like fade={true}

[rohan8538]

Thanks for the response @pythonpioneer. You can refer this code here that is given in the documentation of this loadingbar itself.

`import React, { useState } from 'react'
import LoadingBar from 'react-top-loading-bar'

const App = () => {
const [progress, setProgress] = useState(0)

return (

<LoadingBar
color='#f11946'
progress={progress}
onLoaderFinished={() => setProgress(0)}
/>
<button onClick={() => setProgress(progress + 10)}>Add 10%
<button onClick={() => setProgress(progress + 20)}>Add 20%
<button onClick={() => setProgress(100)}>Complete

)
}

export default App`

This is basically the code that causes loadingbar to disappear once it reaches 100%.

I don't know why it didn't work for you, there might be some other factors associated with it. But from here seems like it should be working.

[pythonpioneer]

It's not working and will not work, the onLoaderFinished callback in react-top-loading-bar is typically used to trigger actions when the loading bar completes its animation, which usually occurs when the progress reaches 100%. If you remove this callback, it won't directly stop the bar at 100%, but it will remove the additional functionality that executes when the loading is finished.

we can reproduce the issue like this

<div className="App">
    <header className="App-header">

        <LoadingBar
            color='#f11946'
            progress={progress}
        />

        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={() => setProgress(100)}>click</button>
    </header>
</div>

The progress bar does not halt at 100.

[klendi]

Yes, it's not supposed to stop at 100%, at 100% the bar fades, adding some prop will do it, perhaps I can find time to do it or you can submit a PR. You can try setting progress to 99.9 and it will look almost the same. React with a like to this comment if this would be a really useful feature to you guys so I can see how many requests it does have and prioritize it.

[pythonpioneer]

Thank you for clarifying the behavior! The idea of adding a prop to stop at 100% sounds promising. I appreciate your openness to finding time to implement it or encouraging others to submit a PR. The tip about setting the progress to 99.9 as a workaround is quite helpful. I'll react with a like to express my support for this feature, and I'll also make a PR to contribute to its implementation.

[pythonpioneer]

Thank you for your understanding and support! I've already submitted a pull request (#80) to implement the requested feature. Your feedback and encouragement are much appreciated. Feel free to check out the pull request for more details and provide any further feedback. Looking forward to collaborating on this enhancement! 😊🚀