ReactProgress Components

Progress

Use one or more progress bars anywhere in your code

One of the great new features of BProgress version 1.1 is the ability to integrate one or more progress bars anywhere in your code.

The Progress component is optional, meaning you can use it to create one or more progress bars in your code. If you don't, the default progress bar will be created automatically.

Warning

When using a custom component for the progress bar, the component will not be dynamically added or removed from the DOM. Instead, it will simply toggle between display: block and display: none.
This behavior may impact performance, especially if the component involves complex rendering or layout calculations.

Progress

Import

You can import the Progress component like this:

import { Progress } from '@bprogress/...';

Note

Replace the ... in the import with the library you're using. For example, if you use @bprogress/next, import by doing from '@bprogress/next'

Warning

The Progress component must be used inside the ProgressProvider with the option template set to null.

<ProgressProvider options={{
  template: null,
}}>
  <Progress />
</ProgressProvider>

Usage

You can use one or more progressive components anywhere in your code.

Warning

The Progress component has a display:none; style by default, and this will change to display:block; for display. You won't be able to play with the component's display property.

You can use with no children:

<Progress />

This will automatically create a complete progress element like this:

<Progress>
  <Bar>
    <Peg />
  </Bar>
  <Spinner>
    <SpinnerIcon />
  </Spinner>
</Progress>

You can also use any children you wish like this:

<Progress>
  <Bar />
</Progress>

This can be a good solution if you want to customize your Progress component with TailwindCSS classes like this:

<div className="fixed top-4 overflow-hidden inset-x-4 rounded-lg bg-neutral-100 h-10">
  <Progress>
    <Bar className="!absolute z-[9999] !bottom-0 !top-auto"></Bar>
    <Spinner className="!top-16">
      <SpinnerIcon />
    </Spinner>
  </Progress>
</div>

Note

Here we use ! to set classes to !important, as we're using basic CSS. However, if you're using custom CSS or no CSS with the disableStyle property, you don't need to set the classes to !important.

Props

NameTypeDefaultDescription
asReact.ElementType'div'The component to render the progress element
childrenReact.ReactNodeundefindedThe children of the progress element
...restReact.ComponentPropsWithoutRef<T>-The rest of the props are passed to the progress element

Advanced Usage

To create absolute position progress bars inside elements that are not directly aligned with the screen edges, you'll need to set the positionUsing option to width.

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

Note

By default, positionUsing will give priority to translate3d (depending on browser compatibility), as this method leverages GPU acceleration, providing smoother animations and better performance, especially for complex or frequently updated UI elements. Using translate3d helps reduce layout recalculations and enhances rendering efficiency compared to other positioning methods.

Previous

ProgressProvider

Next

Bar

On this page