BProgress

BProgress (short for "Bar Progress") is a modern, TypeScript-based reimplementation of the NProgress library. It is designed to provide lightweight, smooth, and animated progress bars to visually indicate loading states during page transitions, data loading, or asynchronous operations.

Key improvements over the original NProgress include:

• Modern TypeScript codebase: Fully rewritten for better type safety and developer experience.
• Active Maintenance: Addresses long-standing community requests and provides modern best practices.
• Framework-Specific Packages: Dedicated integrations for Next.js, React, Remix, and Vue to ensure seamless and efficient usage within specific ecosystems.

Next MW is a utility designed to help developers create and manage multiple middlewares quickly and easily within Next.js applications.

For documentation and more information, visit https://next-mw-docs.vercel.app.

Animate UI is an open-source component distribution designed for React projects. It is built using React, TypeScript, Tailwind CSS, and Motion. You can browse, install, and modify components for use in your own applications.

For more details and to browse components, visit https://animate-ui.com.

By default, BProgress uses translate3d for positioning to leverage GPU acceleration and ensure smooth animations.

If you need to create absolute position progress bars inside elements that are not directly aligned with the screen edges, you must set the positionUsing option to 'width' within the ProgressProvider options.

<template>
  <ProgressProvider :options="{ template: null, positionUsing: 'width' }">
    <Progress />
  </ProgressProvider>
</template>

Starting from version 1.1, BProgress supports using multiple progress bars simultaneously. To enable this mode, you must set the template option to null in the global configuration.

Once configured, you can manually add progress bar HTML structures anywhere in your application. Ensure that the container div with the class bprogress is set to display: none by default in your CSS to prevent it from appearing before it is activated.

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

<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>

The useAnchorProgress hook is used to trigger a progress bar in frameworks where the router does not natively detect the start and end of navigation (for example, the Next.js App Directory router). It achieves this by activating navigation detection based on <a> elements in the DOM and window.history changes.

This differs from the useProgress hook, which should be used if your framework's router does provide explicit start and end events (like the Next.js Pages Directory router).

import { useAnchorProgress } from '@bprogress/react';

// Inside a component
useAnchorProgress(
  {
    // options object
  },
  [dependencies]
);

While @bprogress/core provides the base logic, dedicated packages are available for seamless integration with specific frameworks:

• React: @bprogress/react
• Next.js: @bprogress/next
• Remix: @bprogress/remix
• Vue: @bprogress/vue

If you need full control over the build tool and configuration (webpack, Babel, ESLint, etc.), you can run npm run eject.

Warning: This is a one-way operation. Once you eject, you cannot go back.

Running this command removes the single build dependency and copies all configuration files and transitive dependencies directly into your project. After ejecting, all commands except eject will still work but will point to the newly copied scripts, allowing you to tweak them manually.

The Bar component is used to render the progress bar element. It must be used inside a Progress component to function correctly.

To use it, import Bar from your specific framework package (e.g., @bprogress/next, @bprogress/react, or @bprogress/remix) and place it within the Progress component. You can optionally pass children to the Bar, such as a Peg component or a custom element, to represent the progress indicator.

import { Bar } from '@bprogress/next';

// Inside a Progress component
<Bar>
  <Peg />
</Bar>

To use the core BProgress functionality in a Node.js environment, install the @bprogress/core package using your preferred package manager.

npm install @bprogress/core
# or
pnpm add @bprogress/core
# or
yarn add @bprogress/core
# or
bun add @bprogress/core