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.
Source
Theme source
@saas-ui/nprogress
- 2.8.9 (latest)
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"><NProgressisAnimating={isAnimating}colorScheme="teal"position="absolute"/></Box></Stack>)}
Use with Next.js router
// _app.tsximport { 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?