Navigation progress

Navigation progress bar
Import

Installation

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

Install with yarn:

yarn add @mantine/nprogress @mantine/core @mantine/hooks

Install with npm:

npm install @mantine/nprogress @mantine/core @mantine/hooks

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 {
NavigationProgress,
incrementNavigationProgress,
decrementNavigationProgress,
setNavigationProgress,
startNavigationProgress,
stopNavigationProgress,
resetNavigationProgress,
completeNavigationProgress,
} from '@mantine/nprogress';
function Demo() {
return (
<>
<NavigationProgress />
<Group position="center">
<Button onClick={() => incrementNavigationProgress(10)}>Add 10%</Button>
<Button color="red" onClick={() => decrementNavigationProgress(10)}>
Decrease 10%
</Button>
<Button onClick={() => setNavigationProgress(50)}>Set 50%</Button>
<Button onClick={() => startNavigationProgress()}>Start</Button>
<Button onClick={() => stopNavigationProgress()}>Stop</Button>
<Button onClick={() => resetNavigationProgress()}>Reset</Button>
<Button onClick={() => completeNavigationProgress()}>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 {
startNavigationProgress,
completeNavigationProgress,
NavigationProgress,
} from '@mantine/nprogress';
export function RouterTransition() {
const router = useRouter();
useEffect(() => {
const handleStart = (url: string) => url !== router.asPath && startNavigationProgress();
const handleComplete = () => completeNavigationProgress();
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" />
Download more icon variants from https://tabler-icons.io/i/search

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%
progressLabel
string
aria-label for `Progress`
size
number
The height of the progressbar in px
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