Showing bar for custom width fails

First of all, thanks for the plugin it works well, though I am finding some issues while it displays with added margin, see the screenshot below

What is happening is, I have a top nav bar in which I have added the Loader component which is supposed to show the loader from left 60px of the top bar, for this I have added marginLeft:60px which works well it starts leaving 60px from left, but when it finishes it crosses the header tag and goes beyond limit, see the screenshot which cause scroll bars to come up in the page.

Below is my code of Loader

const Loader = () => {
  return (
    <header style={{height:'3px',marginTop:'15px',marginLeft:'60px'}}>
      <LoadingBar style={{ backgroundColor: 'red', height: '3px', zIndex:9999, width:'100%', paddingRight:'60px' }} showFastActions updateTime={500} />
    </header>
  );
};

I tried to manipulate the width to some random value from 100%, it did work the progress bar was limited to that, but this is not way it should work, the progress bar should never go beyond header…

Any solution?

Thanks.

[iphonic]

Update

I have added position css to both parent and child which seems to fix the problem but partially, see me code below

const Loader = () => {
  return (
    <header style={{height:'3px',marginTop:'13px',marginLeft:'60px',position:'relative'}}>
      <LoadingBar style={{ backgroundColor: '#4da1ff', height: '3px',position:'absolute', zIndex:9999, width:'100%'}} showFastActions updateTime={500} />
    </header>
  );
};

But it created another problem the progress bar doesn’t complete 100%, see below how it looks

I have found that the progress bar doesn’t go up to transform to 1, see the element inspection below,

Thanks.

[mironov]

@iphonic yes, exactly