Navigation progress

Navigation progress bar
Import
Source
View source code
Docs
Edit this page
Package
@mantine/nprogress
License
MIT

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" />
Go back
Modals manager – @mantine/modals
Up next
Notifications system – @mantine/notifications

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter