ProgressProvider

Import the correct ProgressProvider according to your Next.js configuration.

Import

// App Directory
import { ProgressProvider } from '@bprogress/next/app';
 
// Pages Directory
import { ProgressProvider } from '@bprogress/next/pages';

Usage

<ProgressProvider>...</ProgressProvider>

Props

Common props

Prop	Type	Default
`children`	`ReactNode`	`undefined`
`height`	`string`	`2px`
`color`	`string`	`#0A2FFF`
`options`	`BProgressOptions`	`undefined`
`spinnerPosition`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`top-right`
`shallowRouting`	`boolean`	`false`
`startPosition`	`number`	`0`
`delay`	`number`	`0`
`disableSameURL`	`boolean`	`true`
`stopDelay`	`number`	`0`
`nonce`	`string`	`undefined`
`memo`	`boolean`	`true`
`style`	`string`	`BProgress CSS*`
`disableStyle`	`boolean`	`false`
`shouldCompareComplexProps`	`boolean`	`false`

AppProgressBar props

Prop	Type	Default
`targetPreprocessor`	`(url: URL) => URL`	`undefined`
`disableAnchorClick`	`boolean`	`false`
`startOnLoad`	`boolean`	`false`

BProgress CSS

Default BProgress CSS

Next.js docs

Shallow routing on Next.js

ProgressProvider

Import

Usage

Props

Common props

AppProgressBar props

Links

BProgress CSS

Next.js docs

On this page