Top loading bar for Nextjs App Router
Try live demo here
Npm package link here
npm i @jodd/next-top-loading-bar
# or
yarn add @jodd/next-top-loading-bar
# or
pnpm i @jodd/next-top-loading-bar
# or
bun i @jodd/next-top-loading-barimport { LoadingBar } from '@/jodd/next-top-loading-bar';
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<LoadingBar color="#0284c7" waitingTime={200} />
{children}
</body>
</html>
);
}export function Component() {
return (
<div>
{/* use progress link to fire top loading bar on route change */}
<ProgressLink href="/dashboard">Dashboard</ProgressLink>
</div>
);
}import { useLoadingBar } from '@jodd/next-top-loading-bar';
import { useRouter } from 'next/navigation';
export default function Component() {
const { start } = useLoadingBar.getState();
const router = useRouter();
const navigateSomewhere = () => {
const route = '/somewhere';
start(route);
router.push(route);
};
return (
<div>
<button onClick={navigateSomewhere}>Go to somewhere</button>
</div>
);
}import { ProgressButton } from '@jodd/next-top-loading-bar';
export default function Component() {
const computedLink = compute();
return (
<div>
<ProgressButton href={computedLink}>Go to computed link</ProgressButton>
</div>
);
}- This package uses react-top-loading-bar under the hood
- This package uses snap for state management