NProgress

Show feedback when switching pages and content is loading in the background.

NProgress can be helpful in single-page apps (SPA) to give a visual clue to users that something is happening when browsing, in case a page isn't preloaded and may take a moment to load.

Import#

import { NProgress, NProgressNextRouter } from '@saas-ui/react'

Usage#

Basic#

<Box position="relative" overflow="hidden" height="10px">
  <NProgress isAnimating position="absolute" />
</Box>

Bar color#

<Box position="relative" overflow="hidden" height="10px">
  <NProgress isAnimating colorScheme="teal" position="absolute" />
</Box>

Trigger#

import { Stack, Box, Button } from '@chakra-ui/react'
import { NProgress } from '@saas-ui/react'


export default function App() {
  const [isAnimating, setAnimating] = useState(false)
  return (
    <Stack>
      <Box>
        <Button onClick={() => setAnimating(!isAnimating)}>
          Toggle progress
        </Button>
      </Box>
      <Box position="relative" overflow="hidden" height="10px">
        <NProgress
          isAnimating={isAnimating}
          colorScheme="teal"
          position="absolute"
        />
      </Box>
    </Stack>
  )
}

Use with Next.js router#

// _app.tsx
import { useRouter } from 'next/router'
import { NProgressNextRouter } from '@saas-ui/react'


function App({ Component, pageProps }) {
  const router = useRouter()
  return (
    <>
      <NProgressNextRouter router={router} />
      <Component {...pageProps} />
    </>
  )
}

Was this helpful?