Upgrade form 1.0 to 1.3

In addition to migrating to BProgress, if you are migrating from version 1.0 of NProgress-V2, you may need to make some changes.

With version 1.1 there are a few new features and small changes.

The only change will be in the CSS. If you have a custom css, replace the id selector # with a class selector . for nprogress, which has now become bprogress.

This will give you something like this:

- #nprogress
+ .bprogress

What's new

The big news is the ability to use multiple progress bars anywhere in your code.

To do this you need to set a template to null:

BProgress.configure({
  template: null,
});

And add one or more templates like this to your code:

<div class="bprogress" style="display: none">
  <div class="bar">
    <div class="peg"></div>
  </div>
  <div class="spinner">
    <div class="spinner-icon"></div>
  </div>
  <div class="indeterminate">
    <div class="inc"></div>
    <div class="dec"></div>
  </div>
</div>

Another new feature is the addition of the width value for positionUsing. This allows for greater flexibility, including the ability to create progress bars positioned absolutely within elements that are not directly aligned with the edges of the screen.

BProgress.configure({
  positionUsing: 'width',
});