loading-bar fading animations moves bar in the background

[WRMSRwasTaken]

What version of angular-loading-bar are you using? latest version, from bower What version of AngularJS are you using? latest version, from bower

Hi, following issue:

Using bootstrap, I have a 'navbar-fixed-top' with the default bootstrap's css, and I've included your lib with the default options (it's attaching to the body element).

I got the following problem:

When the fade-in and fade-out animations are active (via ngAnimate), the bar's z-index gets behind the bootstrap navbar. Only on finished css animations, the bar is visible.

On pageload, the progressbar is therefore only visible on the finished fade-in animation, while the bar is displaying page loading activity. On (pageload-) finish, the bar's z-index gets again behind the bootstrap navbar, resulting to instant disappearance.

I made a fiddle to demonstrate this:

https://jsfiddle.net/3haLx94x/

When you click on "start progress", the circle starts with its fadein animation, but the bar appears only 2 seconds after clicking it (after finishing the fadein animation, defided with animate.css, same problem persists without animate.css too)

To fix this, you have to add the following css attributes:

#loading-bar {
    z-index: 10002;
    position: fixed;
}

Working fiddle with fix:

https://jsfiddle.net/0h7Lw70v/

While searching for this problem, I found this:

https://stackoverflow.com/questions/7055269/jquery-fadein-on-positionabsolute-causes-z-index-issue

While I don't know if that applies 100% to my problem, I think the following quote describes the problem:

If you remove the bottom elements you'll note that your animation runs fine. But with the 'sub-elements' you only get your fadeIn when it is totally faded in. That's because the z-index is only acknowledged once the animation completes.

The spinner's fading animations are correct working, because the container already has those attributes assigned (which is the target fading element)

#loading-bar-spinner {
  display: block;
  position: fixed;
  z-index: 10002;
  top: 10px;
  left: 10px;
}

The bar itself (.bar) has those too (but it's not the target fading element), but the bar's top container (#loading-bar) is missing those (which is the fading target)

Sorry for this wall of text, I hope my problem (and possible fix) is clear so far.