npmpackage.info

Gathering detailed insights and metrics for @kfarwell/nextjs-toploader

@kfarwell/nextjs-toploader - 1.4.6 | npmpackage.info

@kfarwell/nextjs-toploader

A Next.js Top Loading Bar component made using nprogress, works with Next.js 15 , Next.js 14 and React.

1.4.6

1,081

MIT

TypeScript

20.71 kB

Installations

npm install @kfarwell/nextjs-toploader

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.21.3

NPM Version

6.14.18 Pull Requests

Open

13

Total

55

Closed

10

Merged

32

Issues

Open

34

Total

75

Closed

41

Releases

nextjs-toploader v3.8.16

v3.8.16

Updated on Mar 25, 2025

nextjs-toploader v3.8.15

v3.8.15

Updated on Mar 22, 2025

nextjs-toploader v3.7.15

v3.7.15

Updated on Oct 05, 2024

nextjs-toploader v3.6.15

v3.6.15

Updated on Aug 28, 2024

nextjs-toploader v3.6.14

v3.6.14

Updated on Aug 28, 2024

nextjs-toploader v3.6.13

v3.6.13

Updated on Aug 27, 2024

View All 21 releases

Languages

TypeScript

TypeScript (100%)

Developer

TheSGJ

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,081 Stars

127 Commits

62 Forks

5 Watchers

5 Branches

20 Contributors

Updated on Jul 16, 2025

Maintainers

View All 20 Contributors

Package Meta Information

Latest Version

1.4.6

Package Id

@kfarwell/nextjs-toploader@1.4.6

Unpacked Size

20.71 kB

Size

7.44 kB

File Count

NPM Version

6.14.18

Node Version

14.21.3

Published on

Jul 26, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Next Js TopLoader

A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.

Install

using npm:

1npm install nextjs-toploader

using yarn:

1yarn add nextjs-toploader

Usage

import using:

1import NextTopLoader from 'nextjs-toploader';

Usage with `app/layout.js` for `app` folder structure

For rendering add <NextTopLoader /> to your return() inside the <body></body> of RootLayout():

1import NextTopLoader from 'nextjs-toploader';
2
3export default function RootLayout({ children }) {
4  return (
5    <html lang="en">
6      <body>
7        <NextTopLoader />
8        {children}
9      </body>
10    </html>
11  );
12}

Usage with `pages/_app.js` for `pages` folder structure

For rendering add <NextTopLoader /> to your return() in MyApp():

1import NextTopLoader from 'nextjs-toploader';
2
3export default function MyApp({ Component, pageProps }) {
4  return (
5    <>
6      <NextTopLoader />
7      <Component {...pageProps} />;
8    </>
9  );
10}

Default Configuration

If no props are passed to <NextTopLoader />, below is the default configuration applied.

1<NextTopLoader
2  color="#2299DD"
3  initialPosition={0.08}
4  crawlSpeed={200}
5  height={3}
6  crawl={true}
7  showSpinner={true}
8  easing="ease"
9  speed={200}
10  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
11/>

color: to change the default color of TopLoader.
initialPosition: to change initial position for the TopLoader in percentage, : 0.08 = 8%.
crawlSpeed: increment delay speed in ms.
speed: animation speed for the TopLoader in ms
easing: animation settings using easing (a CSS easing string).
height: height of TopLoader in px.
crawl: auto incrementing behavior for the TopLoader.
showSpinner: to show spinner or not.
shadow: a smooth shadow for the TopLoader. (set to false to disable it)

No vulnerabilities found.

No security vulnerabilities found.

@kfarwell/nextjs-toploader

Installations

Developer Guide

Yes

CommonJS

14.21.3

6.14.18

Pull Requests

13

55

10

32

Issues

34

75

41

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Next Js TopLoader

Install

Usage

Usage with app/layout.js for app folder structure

Usage with pages/_app.js for pages folder structure

Default Configuration

Usage with `app/layout.js` for `app` folder structure

Usage with `pages/_app.js` for `pages` folder structure