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?