A slim progress bar inspired by NProgress.

NProgress V2 and Next NProgress Bar become BProgress!

If you are using nprogress-v2, you can migrate to @bprogress/core by following the migration guide.

To install BProgress, run the following command:

npm install @bprogress/core

Use unpkg:

• JS: https://unpkg.com/@bprogress/core/dist/index.global.js
• ESM: https://unpkg.com/@bprogress/core/dist/index.js
• CSS: https://unpkg.com/@bprogress/core/dist/index.css

Use jsDelivr:

• JS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.global.js
• ESM: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.js
• CSS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.css

The following frameworks have a dedicated package for using BProgress:

• React
• Next.js
• Remix
• Vue

Import CSS in your index.html file.

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/@bprogress/core/dist/index.css"
/>

Import JavaScript in your index.html file.

<script type="module">
  import { BProgress } from 'https://unpkg.com/@bprogress/core/dist/index.js';

  BProgress.configure({
    ...
  });
</script>

Or you can add BProgressJS as a global variable using the legacy include:

<script src="https://unpkg.com/@bprogress/core/dist/index.global.js"></script>
<script>
  const { BProgress } = BProgressJS;

  BProgress.configure({
    ...
  });
</script>

import '@bprogress/core/css';
import { BProgress } from '@bprogress/core';

Simply call start() and done() to control the progress bar.

BProgress.start();
BProgress.done();

Go to the documentation to learn more about BProgress.

If you encounter any problems, do not hesitate to open an issue or make a PR here.

MIT