A SvelteKit top loading bar component made using nprogress.
A SvelteKit top loading bar component made using nprogress.
Note: you might have to throttle the network speed to see the top loader 😅
https://sveltekit-top-loader.pages.dev/
Using npm:
``sh`
npm install sveltekit-top-loader
In your root +layout.svelte file, import the component and render it at the top.
`svelte
props
$3
Color for the top loader.
- Type:
string
- Default: #29d$3
The initial position for the top loader in percentage, 0.08 is 8%.
- Type:
number
- Default: 0.08$3
The increment delay speed in milliseconds.
- Type:
number
- Default: 200$3
The height for the top loader in pixel.
- Type:
number
- Default: 3$3
Auto increamenting behaviour for the top loader.
- Type:
boolean
- Default: true$3
To show spinner or not.
- Type:
boolean
- Default: true$3
Animation settings using easing (a CSS easing string).
- Type:
string
- Default: ease$3
Animation speed in ms for the top loader.
- Type:
number
- Default: 200$3
Shadow for the top loader. You can disable it by setting it to
false.- Type:
string | false
- Default: 0 0 10px ${color},0 0 5px ${color}$3
Template for the top loader.
- Type:
string
- Default: $3
z-index for the top loader.
- Type:
number
- Default: 1600`This library is a port of Next.js top loader. A huge thanks to the creators and contributors of nextjs-toploader and nprogress.