How to control the position of the loading bar?

[Issaminu]

This seems like a great project; I do have a question, however. The loading bar seems to always start at the top left of the page, regardless of placement of the LoadingBar inside the application. How to make the loading bar fit inside a card for example? or in the case of an application using a vertical navigation bar, how could the loading bar start next to the navbar, rather than to always start from the top left of the page (meaning it would start on top of the navbar)?

[Issaminu]

Ended up solving this myself, turns out the main reason was that there's a hidden container for the LoadingBar component, and it has this property: zIndex: 99999999999, see here. So, to control the position of the LoadingBar, we just need to use the property containerStyle to pass attributes to the LoadingBar's container. In the case of my vertical navigation bar, I set it's zIndex=999999 and then passed the following prop to LoadingBar: containerStyle={{left: "7rem", zIndex: 1}} This does work well on a big screen where the full navbar is present but doesn't work when the navbar changes to a pop-up (on a mobile screen), So, to control the containerStyle's attributes depending on screen size, I used the following snippet to generate a width state that changes with the change of window.innerWidth. Then I changed containerStyle accordingly: containerStyle={width > 768 ? { left: "7rem", zIndex: 1 } : {} } So now the LoadingBar's container will follow different rules according to viewport.

I'm not closing this issue since I believe this is a specific workaround for my particular use case. So this remains to be a problem, especially when it comes to changing the position of the LoadingBar to reside inside a specific div, like in a card containg a form.

[alpzaf]

Ended up solving this myself, turns out the main reason was that there's a hidden container for the LoadingBar component, and it has this property: zIndex: 99999999999, see here. So, to control the position of the LoadingBar, we just need to use the property containerStyle to pass attributes to the LoadingBar's container. In the case of my vertical navigation bar, I set it's zIndex=999999 and then passed the following prop to LoadingBar: containerStyle={{left: "7rem", zIndex: 1}} This does work well on a big screen where the full navbar is present but doesn't work when the navbar changes to a pop-up (on a mobile screen), So, to control the containerStyle's attributes depending on screen size, I used the following snippet to generate a width state that changes with the change of window.innerWidth. Then I changed containerStyle accordingly: containerStyle={width > 768 ? { left: "7rem", zIndex: 1 } : {} } So now the LoadingBar's container will follow different rules according to viewport.

I'm not closing this issue since I believe this is a specific workaround for my particular use case. So this remains to be a problem, especially when it comes to changing the position of the LoadingBar to reside inside a specific div, like in a card containg a form.

<LoadingBar containerStyle={{position: 'absolute'}} /> just give position: absolute to containerStyle prop and position: relative to the parent element then you can place loadingBar into div or card etc.