Gathering detailed insights and metrics for next-app-progress-bar
Gathering detailed insights and metrics for next-app-progress-bar
A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages.
Installations
npm install next-app-progress-barDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.12.0
NPM Version
11.0.0
Score
36.2
Supply Chain
29.6
Quality
81.1
Maintenance
100
Vulnerability
91.9
License
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
Download Statistics
Total Downloads
1,059
Last Day
2
Last Week
7
Last Month
40
Last Year
1,059
GitHub Statistics
6 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Jan 29, 2025
Bundle Size
11.69 kB
Minified
3.67 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.5.9
Package Id
next-app-progress-bar@1.5.9
Unpacked Size
57.84 kB
Size
8.65 kB
File Count
26
NPM Version
11.0.0
Node Version
22.12.0
Published on
Jan 29, 2025
Total Downloads
Cumulative downloads
Total Downloads
1,059
Last Day
0%
2
Compared to previous day
Last Week
-56.3%
7
Compared to previous week
Last Month
-13%
40
Compared to previous month
Last Year
0%
1,059
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
⚠️ Package Renamed & No Longer Maintained
This package has been renamed to @siamf/next-progress
Please use @siamf/next-progress instead.
This package is no longer maintained. For the latest updates and improvements, migrate to:
Next App Progress Bar
A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages. Most popular packages are nextjs-toploader and next-nprogress-bar both has some issues. nextjs-toploader do not come with delay time and even they don't want to give this options as it already has a closed PR . On the other hand next-nprogress-bar has a open issue. I just try solve this issues and give the options also.
- Small in Size
delayoptions- Solve for not showing progress bar on first load
- Properly Maintained
Installation
1$ npm i next-app-progress-bar
App Router
Import AppProgressBar in your app/layout.tsx/js and place inside the body tag.
1import { AppProgressBar } from "next-app-progress-bar"; 2 3export default function RootLayout({ children }) { 4 return ( 5 <html lang="en"> 6 <body> 7 <AppProgressBar /> 8 {children} 9 </body> 10 </html> 11 ); 12}
useRouter hook support
For triggering progress bar in your app folder, please use follow the steps bellow.
1//Import `useRouter` from `next-app-progress-bar` instead `next/navigation`. 2 3import { useRouter } from "next-app-progress-bar"; 4 5//Then simple use it as like you normally use from `next/navigation` 6
Page Router
Import PageProgressBar into your pages/_app.tsx/js and place the component on MyApp.
1import { PageProgressBar } from 'next-app-progress-bar'; 2 3export default function MyApp({ Component, pageProps }) { 4 return ( 5 <> 6 <PageProgressBar /> 7 <Component {...pageProps} />; 8 </> 9 ); 10}
For page router you do not handle useRouter separately
Configurations
| Name | Description | Type | Default |
|---|---|---|---|
| color | Progress bar color. | string | #2299DD |
| initialPosition | The progress bar initial position in percentage. For Example - "8/100=8%=0.08" | number | 0.08 |
| crawlSpeed | Incremental delay speed in milliseconds. | number | 200 |
| speed | Animation speed for the progress bar | number | 200 |
| delay | Progress animation start delay | number | 0 |
| easing | Animation cubic-bezier setting for speed | string | ease |
| height | Height of the progress bar in pixels | number | 3 |
| crawl | Auto increment for progress bar | boolean | true |
| showSpinner | Toggle display of top right spinner | boolean | true |
| shadow | A shadow for the progress bar | string | false | 0 0 10px #2299DD,0 0 5px #2299DD |
| template | You can use your custom attribute for your progress bar | string | |
| zIndex | You can re-define the `zIndex` for progress bar | number | 1600 |
| showAtBottom | To show progress bar on bottom | boolean | false |
| showForHashAnchor | If you want to show progress bar on hash anchor tag | boolean | true |
Stay in touch
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf
No vulnerabilities found.
No security vulnerabilities found.