Navigation progress

Navigation progress bar
Import
License

Installation

Package depends on @mantine/core and @mantine/hooks.

Install with yarn:

yarn add @mantine/nprogress

Install with npm:

npm install @mantine/nprogress

Setup NavigationProgress

Render NavigationProgress anywhere in your app within MantineProvider:

import { MantineProvider } from '@mantine/core';
import { NavigationProgress } from '@mantine/nprogress';
function Demo() {
return (
<MantineProvider>
<NavigationProgress />
<App />
</MantineProvider>
);
}

Usage

import { Button, Group } from '@mantine/core';
import { nprogress, NavigationProgress } from '@mantine/nprogress';
function Demo() {
return (
<>
<NavigationProgress />
<Group position="center">
<Button onClick={() => nprogress.increment(10)}>Add 10%</Button>
<Button color="red" onClick={() => nprogress.decrement(10)}>
Decrease 10%
</Button>
<Button onClick={() => nprogress.set(50)}>Set 50%</Button>
<Button onClick={() => nprogress.start()}>Start</Button>
<Button onClick={() => nprogress.stop()}>Stop</Button>
<Button onClick={() => nprogress.reset()}>Reset</Button>
<Button onClick={() => nprogress.complete()}>Finish</Button>
</Group>
</>
);
}

Usage with Next.js

Create RouterTransition component that will handle router events:

// components/RouterTransition.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { NavigationProgress, nprogress } from '@mantine/nprogress';
export function RouterTransition() {
const router = useRouter();
useEffect(() => {
const handleStart = (url: string) => url !== router.asPath && nprogress.start();
const handleComplete = () => nprogress.complete();
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleComplete);
router.events.on('routeChangeError', handleComplete);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleComplete);
router.events.off('routeChangeError', handleComplete);
};
}, [router.asPath]);
return <NavigationProgress autoReset={true} />;
}

Then render it in _app.tsx within MantineProvider:

// pages/_app.tsx
import { AppProps } from 'next/app';
import { MantineProvider } from '@mantine/core';
import { RouterTransition } from '../components/RouterTransition';
export default function App(props: AppProps) {
const { Component, pageProps } = props;
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<RouterTransition />
<Component {...pageProps} />
</MantineProvider>
);
}

Accessibility

NavigationProgress uses Progress component under the hood, to pass aria-label use progressLabel props

<NavigationProgress progressLabel="Loading Page" />

NavigationProgress component props

NameTypeDescription
autoReset
boolean
Determines whether progress should be automatically reset when 100% is reached
color
MantineColor
Key of theme.colors of any other valid CSS color
exitTimeout
number
Number of ms that should elapse before progressbar is hidden after reaching 100%
exitTransitionDuration
number
Exit transition duration in ms
initialProgress
number
The default progress
onFinish
() => void
Called when the progressbar reaches 100%
portalProps
Omit<PortalProps, "children" | "withinPortal">
Props to pass down to the portal when withinPortal is true
progressLabel
string
aria-label for `Progress`
size
number
Height of the progressbar
stepInterval
number
Step interval in ms
transitionDuration
number
Transition duration in ms
withinPortal
boolean
Determines whether progressbar should be rendered within Portal, defaults to true
zIndex
ZIndex
Progressbar z-index