NextTopLoader

NextTopLoader is a simple and customizable loading bar component for Next.js applications. It provides visual feedback to users during page transitions and data loading.

Installation

Install the package using npm or yarn:

npm install nextjs-toploader

Basic Usage

Add the NextTopLoader component to your root layout:

import NextTopLoader from 'nextjs-toploader';


  export default function RootLayout({ children }) {
    return (
      <html>
        <body>
          <NextTopLoader 
            color="hsl(var(--foreground))"
            initialPosition={0.08}
            crawlSpeed={200}
            height={3}
            crawl={true}
            showSpinner={true}
            easing="ease"
            speed={200}
            shadow="0 0 10px #2299DD,0 0 5px #2299DD"
          />
          {children}
        </body>
      </html>
    );
  }

Props

Prop
Type
Default
Description
color
string
—

Color of the loading bar

height
number
—

Height of the loading bar in pixels

showSpinner
boolean
—

Show or hide the loading spinner

crawl
boolean
—

Enable or disable the crawling animation

speed
number
—

Animation speed in milliseconds