Next Top Loader

A Next.js compatible top loading bar component with automatic navigation detection and customizable progress indicators.

Next.js Top Loader

A loading bar that appears at the top of the page during navigation

To use this component, add it to your layout:

import { NextTopLoader } from "@/components/ui/next-top-loader"

export default function Layout({ children }) {
  return (
    <>
      <NextTopLoader />
      {children}
    </>
  )
}

"use client"

import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export function NextTopLoaderDemo() {
  const router = useRouter()

  const simulateNavigation = () => {
    router.push("/docs")
  }

  return (
    <Card className="p-6">
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold">Next.js Top Loader</h3>
          <p className="text-muted-foreground text-sm">
            A loading bar that appears at the top of the page during navigation
          </p>
        </div>

        <div className="bg-muted/50 rounded-lg border p-4">
          <p className="mb-2 text-sm font-medium">
            To use this component, add it to your layout:
          </p>
          <code className="bg-background block rounded p-2 text-xs">
            {`import { NextTopLoader } from "@/components/ui/next-top-loader"

export function Layout({ children }) {
  return (
    <>
      <NextTopLoader />
      {children}
    </>
  )
}`}
          </code>
        </div>

        <Button onClick={simulateNavigation} className="w-full">
          Simulate Navigation
        </Button>
      </div>
    </Card>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.nowts.app/r/next-top-loader.json

Usage

Add the NextTopLoader component to your root layout:

// app/layout.tsx
import { NextTopLoader } from "@/components/ui/next-top-loader"
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  )
}

The component will automatically show a loading bar at the top of the page during navigation.

Customization

Customize the appearance by passing props:

<NextTopLoader color="#3b82f6" height={3} showSpinner={false} />

Manual Control

You can manually trigger the loading bar:

import { useTopLoader } from "@/components/ui/next-top-loader"
 
export function MyComponent() {
  const { start, done } = useTopLoader()
 
  const handleAction = async () => {
    start()
    await someAsyncAction()
    done()
  }
 
  return <button onClick={handleAction}>Start Action</button>
}

Props

Prop	Type	Default	Description
color	string	"hsl(var(--primary))"	Loading bar color
height	number	2	Loading bar height in pixels
showSpinner	boolean	false	Show spinner on the right

Spinner Extended Form

On This Page

Installation Install dependencies Add the component Usage Customization Manual Control Props

Build Your SaaS in Days, Not Months

NOW.TS is the Next.js 15 boilerplate with everything you need to launch your SaaS—auth, payments, database, and AI-ready infrastructure.