- Lightweight and fast
- Customizable
- Automatic progress detection for navigation
- TypeScript support
Install the package using npm:
npm install nextgressAdd the component in your (root) layout:
import { Nextgress } from 'nextgress';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<Nextgress />
{children}
</body>
</html>
);
}Note
The Nextgress component can be used in Client and Server components.
| Prop | Type | Default | Description |
|---|---|---|---|
minimum |
number |
0.25 |
Minimum position (0-1) |
ease |
string |
"ease" |
CSS easing function |
speed |
number |
300 |
Animation speed in milliseconds |
backgroundColor |
string |
"#fb8500" |
Background color of the bar |
height |
number | string |
3 |
Height of the bar |
MIT
This package was inspired by and based on ideas from the Holy Loader package.
Some parts of the code were referenced from Holy Loader, which is licensed under the MIT License.