Position of loading bar

Any way to position the loading bar inside of a div instead of at the top of the page? I tried in CSS:

ngx-loading-bar {
    position: absolute;
}

.parentelement {
    position: relative;
}

My template looks like:

<div class="parentelement">
    <ngx-loading-bar></ngx-loading-bar>
</div>

When I inspect the element in the browser I can see that it does have the correct styling from the stylesheet, but it continues to stay at the top of the page (where it works fine otherwise).

Anything I’m missing? Thanks.

[aitboudad]

@rpvsen RTL direction not supported yet just opened an issue https://github.com/aitboudad/ngx-loading-bar/issues/118 as a feature but this can be done by just overriding the default css:

    ::ng-deep #loading-bar-spinner {
      right: 10px !important;
      left: unset !important;
    }

For v6 use https://github.com/aitboudad/ngx-loading-bar/issues/67#issuecomment-1092268937:

    ::ng-deep .ngx-spinner {
      right: 10px !important;
      left: unset !important;
    }

[colinbr96]

I’m using v6.0.2 and this no longer works. I had to replace #loading-bar-spinner with .ngx-spinner.