https://github.com/devmahmud/next-transition-bar
Effortlessly enhance Next.js apps with next-progress-bar – an npm package for smooth page transition progress. Customizable, lightweight, and visually appealing, it adds a top loader and progress bar. Elevate user experience seamlessly.
https://github.com/devmahmud/next-transition-bar
app-router indicator loading next-nprogress nextjs nprogress progressbar react-nprogress top topbar-progress
Last synced: 2 months ago
JSON representation
Effortlessly enhance Next.js apps with next-progress-bar – an npm package for smooth page transition progress. Customizable, lightweight, and visually appealing, it adds a top loader and progress bar. Elevate user experience seamlessly.
- Host: GitHub
- URL: https://github.com/devmahmud/next-transition-bar
- Owner: devmahmud
- License: mit
- Created: 2023-11-16T16:31:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-23T23:58:04.000Z (8 months ago)
- Last Synced: 2024-10-12T07:24:06.359Z (7 months ago)
- Topics: app-router, indicator, loading, next-nprogress, nextjs, nprogress, progressbar, react-nprogress, top, topbar-progress
- Language: TypeScript
- Homepage: https://next-transition-bar.vercel.app
- Size: 1.82 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Next Transition Bar
Elevate the user experience in your Next.js applications effortlessly with **next-transition-bar** – a versatile npm package designed to seamlessly enhance page transition progress. This lightweight and customizable solution adds a top loader and progress bar, delivering both visual appeal and a smooth transition experience.
[Live Demo](https://next-transition-bar.vercel.app)
## Installation
You can install the package using npm:
```bash
npm install next-transition-bar
```
Or if you prefer using yarn:
```bash
yarn add next-transition-bar
```
## Usage
Start by importing the package:
```js
import NextTransitionBar from 'next-transition-bar';
```
### Integration with `app/layout.js` (for `app` folder structure)
Include `` within the `return()` statement inside the `` of your `RootLayout()`:
```js
import NextTransitionBar from 'next-transition-bar';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### Integration with `pages/_app.js` (for `pages` folder structure)
To render, add `` within the `return()` statement in `MyApp()`:
```js
import NextTransitionBar from 'next-transition-bar';
export default function MyApp({ Component, pageProps }) {
return (
<>
;
>
);
}
```
### Importing nprogress instance
To import `nprogress` from 'next-transition-bar':
```js
import { nprogress } from 'next-transition-bar';
```
or both
```js
import NextTransitionBar, { nprogress } from 'next-transition-bar';
```
### Default Configuration
If no props are passed to ``, the package applies the following default configuration:
```jsx
{css}}
/>
```
- `color`: Change the default color of the top loader.
- `initialPosition`: Adjust the initial position of the top loader (in percentage, e.g., `0.08 = 8%`).
- `trickleSpeed`: Incremental delay speed in milliseconds.
- `speed`: Animation speed for the top loader in milliseconds.
- `easing`: Animation settings using easing (a CSS easing string).
- `height`: Height of the top loader in pixels.
- `trickle`: Auto-incrementing behavior for the top loader.
- `showSpinner`: Toggle spinner visibility.
- `shadow`: A smooth shadow for the top loader (set to `false` to disable it).
- `template`: Include custom HTML attributes for the top loader.
- `zIndex`: Define zIndex for the top loader.
- `showAtBottom`: Display the top loader at the bottom (increase height to ensure visibility on mobile devices).
- `isRTL`: Change the direction of the loader.
- `nonce`: The nonce attribute to use for the `style` tag.
- `transformCSS`: This is useful if you want to use a different style or minify the CSS.
Experience a sleek and visually appealing progress bar with **next-transition-bar**. Customize it to suit your application's unique style and provide users with a delightful journey through your Next.js app.